Angular get value of a material-list-option within the html file-CodePudding

I have this material list:

      <mat-selection-list (selectionChange)="onApplicationSelection(14, $event.options)">
        <mat-list-option  checkboxPosition="before" value="New User">New User</mat-list-option>
        <mat-list-option  checkboxPosition="before" value="Change to existing user">Change to existing user</mat-list-option>
      </mat-selection-list>

Immediately below it I need to conditionally display a div based on weather or not the New User option has been selected:

<div *ngIf(new user option is selected)></div>

I know that you can do this in the ts file in various ways. One of them is in the question with selectChange but I was wondering if there was a way to do this without having to pass a value to the ts file.

CodePudding user response：

Try this

   <mat-selection-list #selection [multiple]="false">
      <mat-list-option  checkboxPosition="before" value="New User">New User</mat-list-option>
      <mat-list-option  checkboxPosition="before" value="Change to existing user">Change to existing user</mat-list-option>
   </mat-selection-list>
            
   <div *ngIf="selection.selectedOptions.selected[0]?.value == 'New User'; else showThis">New User</div>
   <ng-template #showThis>      
      <div>Change to existing user</div>
   </ng-template>