[Fixed] Angular Checkboxes and Visibility

Issue

I’m trying to not display checkboxes if they are not checked in a list. The list opens automatically when a certain product is clicked. I tried to disable the checkboxes but, you can still see unchecked boxes in the list. How can I make this work? Here is my HTML code:

<mat-checkbox class="mt-16" formControlName="IsOlfactory">
                    Koku Alan
                </mat-checkbox>
                <mat-checkbox class="mt-16" formControlName="IsMetalEffective">
                    Metal Kontrolü
                </mat-checkbox>
                <mat-checkbox class="mt-16" formControlName="IsHygroscopic">
                    Higroskopik
                </mat-checkbox>
                <mat-checkbox class="mt-16" formControlName="IsNotSwallowed">
                    Yutulmaması Gereken
                </mat-checkbox>
                <mat-checkbox class="mt-16" formControlName="IsFragrance">
                    Koku Veren
                </mat-checkbox>
                <mat-checkbox class="mt-16" formControlName="IsNotTasted">
                    Tadılmaması Gereken
                </mat-checkbox>
                <mat-checkbox class="mt-16" formControlName="IsFrigrophic">
                    Frigofrik
                </mat-checkbox>

Here is the TS code:

ngOnInit() {
        // Reactive Form
        this.form = this._formBuilder.group({
            IsOlfactory: new FormControl({
                value: this.data.IsOlfactory,
                disabled: true,
            }),
            IsHygroscopic: new FormControl({
                value: this.data.IsHygroscopic,
                disabled: true,
            }),
            IsMetalEffective: new FormControl({
                value: this.data.IsMetalEffective,
                disabled: true,
            }),
            IsNotSwallowed: new FormControl({
                value: this.data.IsNotSwallowed,
                disabled: true,
            }),

Solution

Use *ngIf

<mat-checkbox class="mt-16" formControlName="IsOlfactory" *ngIf="form.get('IsOlfactory').value">
                    Koku Alan
                </mat-checkbox>

form is the formGroup name you have defined.

Note: This will be always hidden unless programatically given value to to the formControl

Assumption: The values are boolean (true or false)…. not a string or integer