Angular checkbox not visible using mat-checkbox

Question

I tried to display checkbox inside angular UI

<mat-checkbox [(ngModel)] = "item.role" [checked]="false"> 
  <label>IT Admin</label> 
</mat-checkbox>

I have attached image below and if I tried to create style for mat-checkbox the style is applied including label.

Hi, change the binding [checked]="false" to [checked]="item.role", I don't understand what is your problem. — Miguel Pinto
– Miguel Pinto, Commented Aug 29, 2019 at 12:21

Nick Henry · Accepted Answer · 2019-08-29 12:52:32Z

1

The style is applied to the label because the label is inside of the mat-checkbox tag. Try separating them and using a form group if you can.

<div class="form-group"> <label for="role">IT Admin</label> <mat-checkbox id="role" [(ngModel)]="item.role" [checked]="item.role"></mat-checkbox> </div>

This is under the assumption that you are using forms.

answered Aug 29, 2019 at 12:52

Nick Henry

586 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

karansys Over a year ago

Hi Nick, I don't have concern on label, I want the checkbox to be displayed even if it is not clicked

Nick Henry Over a year ago

Oh, I see. I misunderstood the question. have you tried adding a class with a border to the mat-checkbox like <mat-checkbox class="something" ...>

karansys Over a year ago

Thank You I am able to style the check box alone now

Ares Over a year ago

May be worth noting that MatCheckboxModule should be imported into app.module.ts , later versions of Angular may not call out error if it's missing.

Pearl Over a year ago

@karansys: plz provide your solution.

Collectives™ on Stack Overflow

Angular checkbox not visible using mat-checkbox

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related