Label for checkbox in Angular

Question

In a regular HTML file we can do as in html to have a privilege to check the checkbox by clicking anywhere on label, even by setting the checkbox input display to none

 <label for="check">
   <input id="check"  type="checkbox">
 </label>

Why same is not working in Angular? I'm interested how I can do same in Angular 5+.

Yes i tried but it didn't work. Actually I want to apply some styling when it is checked and don't want to use .ts for that but it didn't work — Garegin
– Garegin, Commented Oct 31, 2018 at 17:00

Sunil · Accepted Answer · 2018-10-31 16:45:45Z

3

It works in Angular as well.

Sample code

<label for="check"> Click here
   <input id="check" [(ngModel)]="hello" [hidden]="true"  type="checkbox">
 </label>

Demo is here - https://stackblitz.com/edit/angular-6ncjng

answered Oct 31, 2018 at 16:45

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

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

4 Comments

Garegin Over a year ago

I don't need a function, the only thing that I need is to make it checked so to trigger CSS style.

Sunil Over a year ago

Yeah, the example given is not using any function.

Garegin Over a year ago

In my case it is not working, I make [hidden]="false" and when I click on area of label, it doesn't work. Do you have any idea why it is not working?

Sunil Over a year ago

Need to check what you have done exactly, it will be easier if you can create a sample in stackblitz.

Collectives™ on Stack Overflow

Label for checkbox in Angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related