mat-checkbox and ngIf in angular 5 is not working

Question

I have this code to hide and show a piece of content every time a checkbox is ticked and unticked. However, it is not working.

<mat-checkbox ngModel="checked" ngInit="checked=true">Check me!</mat-checkbox>
            <div *ngIf="checked">
                    <mat-radio-group formControlName="contactSupport">
                            <mat-radio-button value="Low">Low</mat-radio-button>
                            <mat-radio-button value="Normal">Normal</mat-radio-button>
                            <mat-radio-button value="high">high</mat-radio-button>
                            <mat-radio-button value="none">None</mat-radio-button>
                    </mat-radio-group>

            </div> 

Answer 1

All you need to do is use 2 way binding

Change this :

ngModel="checked"

to

[(ngModel)]="checked"

WORKING DEMO