Home > database >  Angular Material set mat-checkbox checked programatically
Angular Material set mat-checkbox checked programatically

Time:03-26

I am doing an Angular 12 Material APP.. I have a list of checked created dinamycally like this

   <li *ngFor="let chanel of dataSourceChannelLevel">
            <mat-checkbox id={{chanel.NotificationLogLevel.Id}} formControlName="Channel"
             (change)="onChangeEventFunc( $event)">
              {{chanel.NotificationLogLevel.Name}}
            </mat-checkbox>
 </li>

I want also to checked them depending on the condition of

 "chanel.NotificationLogLevel.IsActive"

I have tried with value= "chanel.NotificationLogLevel.IsActive"

but those not work... also with

 [checked]= "chanel.NotificationLogLevel.IsActive"

Also I tested calling a function...

[checked]= "CheckMe()"

and in the component

  CheckMe()
  {
    console.log("here");
   return true;
  }

IT logs "Here" but the combo is not checked...

The only things it works is [ngModel] but it checked all the mat-checkbox where checked or unchecked.

I can not set them from Html nor Component.

I am using Material API MatCheckboxModule.

Is another API I am missing?

Is there a way to do it?

Thanks

CodePudding user response:

This is just a syntax error, you probably want to do =>

[checked]="chanel.NotificationLogLevel.IsActive"

Mapped attributes inside brackets "[]" are interpreted directly.

CodePudding user response:

Finally I found the problem...

When I defined the FormGroup I add defined

Channel: new FormControl(''),

insted of

Channel: new FormArray([])

And in the HTML I had defined

 <mat-checkbox id= {{chanel.NotificationLogLevel.Name}} formGroupName="Channel"

instead of

 <mat-checkbox id= {{chanel.NotificationLogLevel.Name}} formArrayName="Channel"
  • Related