angularangular-content-projection

template-outlet inside mat-select not working


I am trying to pass #tmp in the mat-select with template-outlet and I' am not able to display the select options. Below here is my code and a link to stackblitz

    <mat-form-field>
        <mat-select 
           [ngModel]="selectedFoods" 
           (ngModelChane)="selectedFoods" placeholder="Favorite food" multiple>
        <ng-container *ngFor="let food of allfoods"
            [ngTemplateOutlet]="tmp"
            [ngTemplateOutletContext]="{ $implicit: food}">
        </ng-container>
        </mat-select>
    </mat-form-field>
    <ng-template #tmp let-food>
      <mat-option [value]="food.value">
        {{food.viewValue}}
      </mat-option>
    </ng-template>

https://stackblitz.com/edit/angular-mat-select-with-ngmodel-mujorn?embed=1&file=app/select-overview-example.ts


Solution

  • This seems to work.I think the important part is still having the <mat-options> inside the <mat-select> and not as part of the template.

    https://stackblitz.com/edit/mat-select-with-ngtemplateoutlet-example?devtoolsheight=33&file=app/select-overview-example.html

    <mat-form-field>
        <mat-select>
           <mat-option *ngFor="let food of allfoods"  [value]="food.value">
              <ng-container [ngTemplateOutlet]="tmp" [ngTemplateOutletContext]="{food: food}">
              </ng-container>
           </mat-option>    
        </mat-select>
    </mat-form-field>
    
    <ng-template #tmp let-food="food">
        {{food.viewValue}} <b> From Tmp</b>
    </ng-template>
    
    
    

    Dropdown showing template value in select