Angular 10 conditionally render div based on multi-select options

Question

I had originally create this radio group that conditionally rendered other radio groups:

      <mat-radio-group #pharmacyGroup class="radio-group" (change)="onPharmacyOptionChange($event.value)">
        <mat-radio-button class="radio-item" value="MILT">MILT</mat-radio-button>
        <div *ngIf="pharmacyOption === 'MILT'">
        <mat-radio-group class="radio-group" (change)="onRadioChange(25, $event.value)">
          <mat-radio-button class="sub-radio-item" value="MILT - Pharmacist">Pharmacist</mat-radio-button>
          <mat-radio-button class="sub-radio-item" value="MILT - Pharmacy Tech">Pharmacy Tech</mat-radio-button>
        </mat-radio-group>
        </div>
        <mat-radio-button class="radio-item" value="Pharmogistics">Pharmogistics</mat-radio-button>
        <div *ngIf="pharmacyOption === 'Pharmogistics'">
          <mat-radio-group class="radio-group" (change)="onRadioChange(25, $event.value)">
            <mat-radio-button class="sub-radio-item" value="Pharmogistics - Pharmacist">Pharmacist</mat-radio-button>
            <mat-radio-button class="sub-radio-item" value="Pharmogistics - Pharmacy Tech">Pharmacy Tech</mat-radio-button>
            <mat-radio-button class="sub-radio-item" value="Pharmogistics - Manager">Manager</mat-radio-button>
            <mat-radio-button class="sub-radio-item" value="Pharmogistics - Buyer">Buyer</mat-radio-button>
            <mat-radio-button class="sub-radio-item" value="Pharmogistics - PharmIT">PharmIT</mat-radio-button>
          </mat-radio-group>
        </div>
        <mat-radio-button class="radio-item" value="Other">Other</mat-radio-button>
        <div *ngIf="pharmacyOption === 'Other'">
          <mat-selection-list (selectionChange)="onApplicationSelection(25, $event.options)">
            <mat-list-option class="col-md-3" checkboxPosition="before" value="Pharmacy Keeper">Pharmacy Keeper</mat-list-option>
            <mat-list-option class="col-md-3" checkboxPosition="before" value="CAPS">CAPS</mat-list-option>
            <mat-list-option class="col-md-4" checkboxPosition="before" value="HSV">HSV</mat-list-option>
          </mat-selection-list>
        </div>
      </mat-radio-group>

  public pharmacyOption: string;

  ...

  onPharmacyOptionChange(choice: string): void {
    console.log(choice);
    this.PharmacyOption = choice;
  }

But now the client has specified that the top level radio group actually needs to be a multi-select list. So I'm trying to achieve the same functionality like this:

<mat-selection-list #pharmacyGroup (selectionChange)="onPharmacyOptionChange($event.options)">
        <mat-list-option class="col-md-3" checkboxPosition="before" value="MILT">MILT</mat-list-option>
        <div *ngIf="pharmacyOptions.includes('MILT')">
          <mat-radio-group class="radio-group" (change)="onRadioChange(25, $event.value)">
            <mat-radio-button class="sub-radio-item" value="MILT - Pharmacist">Pharmacist</mat-radio-button>
            <mat-radio-button class="sub-radio-item" value="MILT - Pharmacy Tech">Pharmacy Tech</mat-radio-button>
          </mat-radio-group>
        </div>
        <mat-list-option class="col-md-3" checkboxPosition="before" value="Pharmogistics">Pharmogistics</mat-list-option>
        <div *ngIf="pharmacyOptions.includes('Pharmogistics')">
          <mat-radio-group class="radio-group" (change)="onRadioChange(25, $event.value)">
            <mat-radio-button class="sub-radio-item" value="Pharmogistics - Pharmacist">Pharmacist</mat-radio-button>
            <mat-radio-button class="sub-radio-item" value="Pharmogistics - Pharmacy Tech">Pharmacy Tech</mat-radio-button>
            <mat-radio-button class="sub-radio-item" value="Pharmogistics - Manager">Manager</mat-radio-button>
            <mat-radio-button class="sub-radio-item" value="Pharmogistics - Buyer">Buyer</mat-radio-button>
            <mat-radio-button class="sub-radio-item" value="Pharmogistics - PharmIT">PharmIT</mat-radio-button>
          </mat-radio-group>
        </div>
        <mat-list-option class="col-md-4" checkboxPosition="before" value="Other">Other</mat-list-option>
        <div *ngIf="pharmacyOptions.includes('Other')">
          <mat-selection-list (selectionChange)="onApplicationSelection(25, $event.options)">
            <mat-list-option class="col-md-3" checkboxPosition="before" value="Pharmacy Keeper">Pharmacy Keeper</mat-list-option>
            <mat-list-option class="col-md-3" checkboxPosition="before" value="CAPS">CAPS</mat-list-option>
            <mat-list-option class="col-md-4" checkboxPosition="before" value="HSV">HSV</mat-list-option>
          </mat-selection-list>
        </div>
      </mat-selection-list>

  public pharmacyOptions: string[];

  ...

 onPharmacyOptionChange(choice: any): void {
    for (let i of choice){
      console.log(i.value);
      this.pharmacyOptions.push(i.value);
    }
    console.log(this.pharmacyOptions);
  }

But I'm getting this error:

[Error] ERROR – TypeError: undefined is not an object (evaluating 'ctx.pharmacyOptions.includes')
TypeError: undefined is not an object (evaluating 'ctx.pharmacyOptions.includes')

If I output the value of the array it appears as it should so I'm not sure why the value is undefined. That said, maybe this isn't the proper way to do this or maybe someone can see the problem with my code. How could I properly achieve what I'm trying to here?

Answer 1

You should define the initial value of pharmacyOptions so it should be

pharmacyOptions:string[]=[]

instead of

pharmacyOptions:string[];