Angular material error when using ng-template

Question

I want to use different UI to the navigation bar with same links using Angular material (2+).

I've tried to do it with <ng-template> surrounded the links with the mat-tab-link directive, but I got the error below in the console:

ERROR Error: StaticInjectorError(AppModule)[MatTabLink -> MatTabNav]: StaticInjectorError(Platform: core)[MatTabLink -> MatTabNav]: NullInjectorError: No provider for MatTabNav!

Steps to reproduce: Using the official example

I just change the html like that:

<nav mat-tab-nav-bar [backgroundColor]="background">
    <ng-container *ngTemplateOutlet="list"></ng-container>
</nav>

<ng-template #list>
    <a mat-tab-link *ngFor="let link of links" (click)="activeLink = link" [active]="activeLink == link"> {{link}} </a>
    <a mat-tab-link disabled>Disabled Link</a>
</ng-template>

Isn't the ng-template should render inside the <ng-container>?