Angular material checkbox to show and hide content

I am trying to include an Angular Material checkbox in my app which defaults to unchecked, and when checked sets a variable to true. An ng-container on the page has an *ngIf that should show the contents in the checkbox is checked.

I have a few of these on the page (not in groups), so each one uses it own model.

For example, in my component I have a boolean initialized to the initial state: showMoreAccounting = false;

I create the checkbox:

<mat-checkbox [(ngModel)]="showMoreAccounting">More accounting and reference</mat-checkbox>

and the conditional container:

   <ng-container *ngIf="showMoreAccounting">
    ...
   </ng-container>

I can click the checkbox and toggle its visual state, but the value of my boolean does not change.

I have read all the docs and looked at the available examples, but so far none explains this discrepancy.

If I use a normal checkbox, it works:

       <input type="checkbox"
                     name="showMore"
                     [(ngModel)]="showMoreAccounting"
                     id="showMore">&nbsp;<label for="showMore">More accounting and reference</label>