Angular Material hide mat-option

Question

I can see there is property hidden, But when I try its property its not working

<mat-option 
  *ngFor="let item of itemlist" 
  [value]="item.Name" 
  [hidden]="true">
  <span>{{ item.Name }}</span>
</mat-option>

But above is not hiding.

What can I do to hide it, I need to hide few options depending on condition

Please advise.

Thanks

Answer 1

Just use an [ngStyle] with your condition and set the display property to block or none accordingly.

An eg:

<mat-option 
  *ngFor="let item of itemlist; let i = index;" 
  [value]="item.Name" 
  [ngStyle]="{ display : i % 2 === 0 ? 'none' : 'block' }"
  <span>{{ item.Name }}</span>
</mat-option>

Here's a Sample StackBlitz for your ref.