How to dynamically add tabs to Angular primeNg tabview control?

Question

I have looked through the answered questions and not seeing a suitable answer.

I am using Angular2 primeNg module.

I have a tabView that needs to dynamically add a list of tabs, each containing their own component. What tabs need to get included in based a config file that I read at run time.

Following the primeng examples I see how to do it using hard coded or ngFor directive used for this.

Using the *ngFor directive, assuming I have loaded a list of component details, type or else, from the config file, how do I add them to tabView at run time.

What is the correct/recommended way to do this?

Answer 1

This is the simplest scheme I have found so far:

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <input type="radio" name="sel" value="0" (click)="update($event)"> first<br>
  <input type="radio" name="sel" value="1" (click)="update($event)"> second<br>
  <div *ngIf="selected===0">Selected first </div>
  <div *ngIf="selected===1">Selected second</div>
  `
})