Selecting an Angular Material checkbox causes another checkbox to appear-CodePudding

I have two Angular Material checkboxes:

<mat-checkbox>BOX1</mat-checkbox>
<mat-checkbox>BOX2</mat-checkbox>

I want BOX2 to only appear when BOX1 is checked. When BOX1 is unchecked, BOX2 should disappear. Is there any example that exists for me to look at to accomplish this? Thanks for your time.

CodePudding user response：

You can use an *ngIf on the second checkbox. See stackblitz at the bottom.

export class AppComponent  {
  public form: any = {
    checkboxOne: false,
    checkboxTwo: false
  }
}

<md-checkbox 
    [(ngModel)]="form.checkboxOne">One</md-checkbox>
<md-checkbox 
    *ngIf="form.checkboxOne" [(ngModel)]="form.checkboxTwo">Two</md-checkbox>

https://stackblitz.com/edit/angular-material-ncsge5