Can't bind to 'active' since it isn't a known property of 'mat-tab'

Question

I'm having this error even if I imported MatTabsModule.

here's how my component looks like:

@Component({
selector: 'app-settings-page',
template: `
<mat-tab-group animationDuration="0ms">
  <mat-tab
    *ngFor="let routeLink of routeLinks; let i = index;"
    [label]="routeLink.label"
    [routerLink]="routeLink.link"
    [active]="activeLinkIndex === i">
  </mat-tab>
</mat-tab-group>
<router-outlet></router-outlet>`
})

Answer 1

As i see the problem here is using <mat-tab-group>, remove that part and it should work fine.

  <mat-tab
    *ngFor="let routeLink of routeLinks; let i = index;"
    [label]="routeLink.label"
    [routerLink]="routeLink.link"
    [active]="activeLinkIndex === i">
  </mat-tab>