title: Angular 8 - *ngIf and mat-checkbox not working
body: <p>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. </p>
  
  <p>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: <a href="https://stackblitz.com/edit/angular-mat-checked?file=app%2Fcheckbox-overview-example.html" rel="noreferrer">https://stackblitz.com/edit/angular-mat-checked?file=app%2Fcheckbox-overview-example.html</a></p>
  
  <p>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. </p>
  
  <pre><code>        &lt;mat-checkbox [(ngModel)]="checked" [checked]="false"&gt;
            I agree to {{clientName}} storing my details.
            &lt;a href="#" target="_blank"&gt;View full terms &amp; conditions&lt;/a&gt;
          &lt;/mat-checkbox&gt;
  
          &lt;div *ngIf="checked" id="contactOptionsGroup"&gt;
            &lt;p&gt;Stay updated with news, features, and offers related to {{clientName}}.&lt;/p&gt;
            &lt;mat-checkbox&gt;Phone&lt;/mat-checkbox&gt;
            &lt;mat-checkbox&gt;Email&lt;/mat-checkbox&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>There will be another instance of this functionality later on in the project too, so they'll need to work independently of each other. </p>
  
  <p>If anyone has help or suggestions, I'd be eternally grateful.</p>