0

I have a mat-selection-list with several options, I want that when selecting an option all the other options disappear and when deselecting the option, all the other options reappear.

If there is another better way to do it, I would like to know.

I have tried to place a ngIf in which if nothing is selected, everything appears, and if there is something selected, only the selected option is kept.

<mat-selection-list #flightsList [(ngModel)]="selectedFlight" (ngModelChange)="onFlightSelection($event)">
    <h3 mat-subheader>Selecciona el vuelo</h3>
    <ng-container *ngFor="let flight of flights">
        <mat-list-option [value]='flight' #option *ngIf="selectedFlight.length == 0 || option.selected">
             {{ flight.name }}
        </mat-list-option>
    </ng-container>
</mat-selection-list>

The selection does not work and it gives me a console error

The error is "undefined option", I suppose it is because at the moment of disappearing, there is no #option

juanjinario
  • 596
  • 1
  • 9
  • 24

1 Answers1

0

You should consider to use a simple dropdown for that, an option to do this is with a mat-select, or a native HTML select.

But you should at least not take the one and only same #option view reference for every of the multiple, changing flight objects. Add an index to your *ngFor and take this index as reference:

*ngFor="let flight of flights; let i = index"
   <mat-list-option #i></mat-list-option> ....
seawave_23
  • 1,169
  • 2
  • 12
  • 23
  • There is no relation between `let i = index` and `#i` – ElasticCode Jul 18 '19 at 20:56
  • have you ever heard of template variables? It's the same with mat-datepickers. You have to give a unique reference to the options. Check it here: https://stackoverflow.com/questions/49451678/mat-datepicker-inside-ngfor – seawave_23 Jul 18 '19 at 21:06