Angular 8 - *ngIf and mat-checkbox not working

Question

I'm having an issue with the Angular Material Checkbox which I thought would be a relatively simple thing, but for some reason I can't get it to work.

I have a div which I only want to show when the mat-checkbox is checked, but it doesn't seem to want to work with *ngIf even though I found an example of it working here: https://stackblitz.com/edit/angular-mat-checked?file=app%2Fcheckbox-overview-example.html

I tried applying very similar code to my project, but it doesn't seem to want to work, nor does anything else I've tried.

        <mat-checkbox [(ngModel)]="checked" [checked]="false">
          I agree to {{clientName}} storing my details.
          <a href="#" target="_blank">View full terms & conditions</a>
        </mat-checkbox>

        <div *ngIf="checked" id="contactOptionsGroup">
          <p>Stay updated with news, features, and offers related to {{clientName}}.</p>
          <mat-checkbox>Phone</mat-checkbox>
          <mat-checkbox>Email</mat-checkbox>
        </div>

It seems like being able to show and hide this div by checking and unchecking should be relatively simple but I appear to be stumped. I might be missing something completely obvious, but I can't see what it may be.

There will be another instance of this functionality later on in the project too, so they'll need to work independently of each other.

If anyone has help or suggestions, I'd be eternally grateful.

Answer 1

You don't need to define a variable in component. You could also reference the checkbox

<mat-checkbox #termsAndConditions>
          I agree to {{clientName}} storing my details.
          <a href="#" target="_blank">View full terms & conditions</a>
        </mat-checkbox>

        <div *ngIf="termsAndConditions.checked" id="contactOptionsGroup">
          <p>Stay updated with news, features, and offers related to {{clientName}}.</p>
          <mat-checkbox>Phone</mat-checkbox>
          <mat-checkbox>Email</mat-checkbox>
        </div>