navtab in angular 6

I try to make a nav tab in angular 6 that change the contents of a div but with what I have in each of my components this I tried.

with only a few texts but when running my project I do not see anything, I hope you can help me.

<div id="principal" role="tabpanel">

<ul class="nav nav-tabs" role="tablist">
  <li *ngfor="let cat of navcat; let first = first;"
   [ngclass]="{firstItem: first}" class="nav-item" role="presentation" 
[class.active]="selectedcat===cat">
    <a class="nav-link active" routerLink="/curso" (click)="selectedcat = 
cat" 
    aria-controls="one" data-toggle="tab" role="tab">{{cat}}</a>
  </li>

    <div class="tab-content">
  <!-- <div *ngIf="selectedcat === cat[0]" role="tabpanel" class="tab-pane 
active" id="one">
 cat 1 content</div>
  <div *ngIf="selectedcat === cat[1]" role="tabpanel" class="tab-pane 
active" id="two">
cat 2 content</div> -->
</div>

and in my .ts

export class CatalogosComponent implements OnInit {
      navcat:string[] = 
   ['curso','destino','ubicacion','telemento','eaprendizaje','filtro'];
     selectedcat = this.navcat[0];