Mat-option values based on a condition

Question

I am just trying to populate values in a mat-select.

 <mat-select id="selproj" class="proj-selector" >
      <mat-option *ngFor="let project of projects " [value]="project.projId">
        {{project.projName}}
      </mat-option>
 </mat-select>

The project array is something like this

0: {projStatus: "Y", projName: "Test-1", projtId: 3}
1: {projStatus: "N", projName: "Test-2", projId: 9}

Now what I am looking to do is if the projstatus is no , I have to show mat-option value in the select box as projname-notactive. But if the project status is Y, I should show only the project name. I cannot use both ngif and ngfor together in mat-option. How can I acheive this?

T. Sunil Rao T. Sunil Rao · Accepted Answer · 2020-05-11T15:54:39

You can use ng-container for *ngFor and use *ngIf on mat-option

 <mat-select id="selproj" class="proj-selector" >
    <ng-container *ngFor="let project of projects ">
      <mat-option *ngIf="condition" [value]="project.projId">
        {{project.projName}}
      </mat-option>
    </ng-container>
 </mat-select>

Replace condition with whatever condition you need.

Hope it helps!

EDIT:

With the condition stated in the comment, you need not use ng-container. You can use *ngIf in span

<mat-option [value]="project.projId">
  {{project.projName}} <span *ngIf="project.projStatus=='N'">Not-Active</span>
</mat-option>

And if you only need text in mat-option ...

<mat-option [value]="project.projId">
  {{project.projName + (project.projStatus=='N' ? 'Not-Active' : '')}}
</mat-option>

Mat-option values based on a condition

1 Answers