Angular mdbootstrap , mdb-tabs ngIf condation if true , tab will index at the end

Unfortunately stuck with lots of code here. its referenced like so

"ng-uikit-pro-standard": "file:ng-uikit-pro-standard-8.3.0.tgz",

I am just trying to get a tab to show in between 1 and 3 if a condition is true.

normally the website looks like

Tab intro | tab order | tab complete

Tab intro | Tab pre registration | tab order | tab complete

normally code to handle this you would do

<mdb-tabset #tabs
    <mdb-tab header ="Tab Intro">...
    <mdb-tab *ngIf="requirePreregistration == true" header ="Tab pre registration">...
    <mdb-tab header ="tab order">...
    <mdb-tab header ="tab complete">..

but only adds it add the end of the condition is true

Tab intro | tab order | tab complete | Tab pre registration

if false, the tab does not show. There is allot of code on this page. What can be done?

the typescript if needed

ngOnInit() {
    if(order.type == RequestPaymentType.PreRegrister)
        this.requirePreregistration = true;
}

I understand tabs can be created dynamically, i have tried to give them an index,changeDetectorRef might have a play in this?

ref: https://mdbootstrap.com/

simply put

add tabOrder , nothing on the typescript side, which I was doing giving me errors, and was down the right path

<mdb tabOrder="1"
<mdb tabOrder="2"