CODEWITHSUNDEEP
javascripthtmlangulartypescript
Rocket Monkey
Rocket Monkey

Reputation: 390

Angular ngModel with an if condition

I'm new in Angular, and I'm trying to write a code that will display a list of checkboxes. If the checkbox is unchecked, it will not be displayed on the list. I'm using ngModel to bring data from an interface. I tried to use *ngIf to only display checked checkboxes, but it did not work. How can I solve this?

The HTML:

<div fxFlex fxLayout="row">
                        <div fxLayout="column" class="pr-40 pl-20">
                            <mat-checkbox class="mt-24 pr-4" disabled name="IsTakenColdEnvironment"
                                [(ngModel)]="rawMaterialInformation.IsTakenColdEnvironment">
                                Açıldığında -18 C Alınmalı
                            </mat-checkbox>
                            <mat-checkbox class="mt-24" disabled name="IsOlfactory"
                                [(ngModel)]="rawMaterialInformation.IsOlfactory">
                                Koku Alan
                            </mat-checkbox>
                            <mat-checkbox class="mt-24" disabled name="IsMetalEffective"
                                [(ngModel)]="rawMaterialInformation.IsMetalEffective">
                                Metal Kontrolü
                            </mat-checkbox>

enter image description here

Upvotes: 2

Views: 1339

Answers (1)

Vincent Lim
Vincent Lim

Reputation: 324

Add a *ngIf="your_condition" in to your checkbox.

<mat-checkbox class="mt-24" disabled name="IsMetalEffective" *ngIf="rawMaterialInformation.IsMetalEffective"
    [(ngModel)]="rawMaterialInformation.IsMetalEffective">
    Metal Kontrolü
</mat-checkbox>

Upvotes: 2

Related Questions