How to remove a `mat-list-option`

Question

I have a dynamic <mat-selection-list> that I'm using to select filters based on a select menu, but I don't want the option to appear if the records I want to return don't apply.

Examples:

Cats have the middle option available:

But when we choose Snakes we should not have the Checkbox as an option:

I understand that currently I'm only *ngIf -ing the <span> the option will remain. Is their a way to remove the option entirely based on the value of the 'Return records in'?

code ex: https://stackblitz.com/edit/material-selection-list-5-0-0-qhyxd5?file=app%2Fapp.component.html

Answer 1

To solve this kind of issue when you don't need additional html tag, you can leverage <ng-container></container> . Something like this:

<mat-selection-list #list [(ngModel)]="selectedOptions">
  <ng-container *ngFor="let filter of filterOptions">
    <mat-list-option *ngIf='filter.value === "filter1"'
                     [value]="filter.value"
                     [selected]='filter.selected'>
      <span >
        Maximum number of records to return
      </span>
    </mat-list-option>
    <mat-list-option *ngIf='filter.value === "filter2" && ((returnRecordsIn === "Dogs") || (returnRecordsIn === "Cats"))'
                     [value]="filter.value"
                     [selected]='filter.selected'>
      <span>
        {{returnRecordsIn === 'Dogs' ? 'Minimum' : 'Maximum'}} number of breeds
      </span>
    </mat-list-option>
    <mat-list-option *ngIf='filter.value === "filter3"'
                     [value]="filter.value"
                     [selected]='filter.selected'>
      <span >
        Return random selection of {{returnRecordsIn}}
      </span>
    </mat-list-option>
    </ng-container>
</mat-selection-list>

Live demo: https://stackblitz.com/edit/material-selection-list-5-0-0-cloop8?file=app/app.component.html

Side note: in correct html, this *ngIf='filter.value === "filter1"' should be *ngIf="filter.value === 'filter1'" (same remark for the other *ngIf)

Answer 2

The clue could be to use an additional class:

HTML

<mat-list-option [class.toto]='filter.value === "filter2" && !((returnRecordsIn === "Dogs") || (returnRecordsIn === "Cats"))'
 *ngFor="let filter of filterOptions" [value]="filter.value" [selected]='filter.selected'>

CSS

  ::ng-deep .mat-list-item.toto{
      display:none !important;
  }

DEMO

Answer 3

You can do:

<mat-selection-list #list [(ngModel)]="selectedOptions">
    <ng-container *ngFor="let filter of filterOptions">
        <mat-list-option 
            *ngIf="!(filter.value === 'filter2' && returnRecordsIn === 'Snakes')"
            [value]="filter.value" 
            [selected]='filter.selected'>
            <span *ngIf='filter.value === "filter1"'>
                Maximum number of records to return
            </span>
            <span *ngIf='filter.value === "filter2" && returnRecordsIn !== "Snakes"'>
                {{returnRecordsIn === 'Dogs' ? 'Minimum' : 'Maximum'}} number of breeds
            </span>
            <span *ngIf='filter.value === "filter3"'>
                Return random selection of {{returnRecordsIn}}
            </span>
        </mat-list-option>
    </ng-container>
</mat-selection-list>