Show (Display) different Tabs based on condition in Angular 7

I am very new to Angular and I have recently started working on Angular7 project. I am stuck in below implementation:

I have to show different tabs based on selected FieldName. Example: If FieldName == 'Field 1', show tab: Tab1, Tab2 If FieldName == 'Field 2', show tab: Tab2, Tab3, likewise.

My code is as below: Component.HTML

<div class="menu-og">
        <ul>
            <li
            *ngFor="let tab of tabArray;let i = index"
            [class.active]="selectedIndex === i"         
            (click)="getCurrentTab(tab,i)" >
                <a>{{tab.title}}</a>
            </li>
        </ul>
    </div>

Component.ts

@Input() public selectedField: string; // here I am getting the selected field from the application

public tabArray: ProdPerfTabList[] = [
{title: 'TAB 1'},
{title: 'TAB 2'},
{title: 'TAB 3'},
];

public selectedIndex: number = 0;
public tab: ProdPerfTabs;

// constructor() {}

public ngOnInit(): void {
this.getCurrentTab(this.tabArray[0], 0);
}
public getCurrentTab(tab: ProdPerfTabList, i: number): void {
this.tab = ProdPerfTabs[tab.title];
this.selectedIndex = i;
this.selectedTab.emit(this.tab);
}

Model.ts

export enum ProdPerfTabs {
TAB 1 = 'TAB 1',
TAB 2 = 'TAB 2',
TAB 3 = 'TAB 3',
}

export interface ProdPerfTabList {
title: string;
}

I want to do the above implementation using model. Apologize if my question is too basic. Any help would be appreciated. Thank you in advance