Mat-Checkbox if checked to show multiple fields not working-CodePudding

I am trying to show multiple fields if the checkbox is checked but the way I have coded it hasn't worked so far. Currently it does nothing when I check the checkbox. I want to show the input fields after the checkbox has been checked. Can someone please help me with a solution and why my current code isn't working.

html

<mat-expansion-panel fluid [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
  <h2 class="section-title">Header</h2>
 </mat-panel-title>

<div class="row">
  <mat-checkbox (click)="toggle()">Checkbox </mat-checkbox>
 </div>
 <div [hidden]="isHidden">
 <mat-form-field appearance="fill">
 <mat-label>Input</mat-label>
 <input matInput>
 </mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Select</mat-label>
 <mat-select>
   <mat-option value="one">First option</mat-option>
   <mat-option value="two">Second option</mat-option>
 </mat-select>
 </mat-form-field>
  <mat-form-field appearance="fill">
    <mat-label>Textarea</mat-label>
    <textarea matInput></textarea>
   </mat-form-field>
   </div>
   </mat-expansion-panel>

 isHidden = false;

  toggle() {
  this.isHidden = !this.isHidden;
}

CodePudding user response：

You need to check the API for the mat-checkbox element, it has checked output, not click and you can use this. Here is an example