angular material checkbox surrounding div click

Question

I have an angular 5 material checkbox with a surrounding div and some other elements. I want a click on the div to be the same as a click directly on the checkbox.

Here is my example code:

<div (click)="checked = !checked">
  <mat-checkbox class="example-margin" [(ngModel)]="checked">
                I'm a not working checkbox :'(                  
  </mat-checkbox>
  <span style="background-color: #dddd00;">I want to be clickable too</span>
</div>

and a Stackblitz

At the moment clicking on the checkbox itself is not working, clicking outside the div works. Any ideas?

how the save workes on Stackblitz ..seems like not saving my code — Pranay Rana
– Pranay Rana, Commented Mar 15, 2018 at 13:47
then try this , its working : stackblitz.com/edit/angular-hyvsxv-teyv7t?file=app/… — Pranay Rana
– Pranay Rana, Commented Mar 15, 2018 at 16:30

Pranay Rana · Accepted Answer · 2018-03-15 16:48:18Z

5

Issue here is event of Click on div and [(ngModel)] on checkbox both nullify each other thats the reason its not working.

To make it work you need to stopPropagation, when you click on div element. so i did code as below returning false from div click event that stop it and you code will work.

Working Demo

component.ts

export class CheckboxConfigurableExample {
  checked = false;
  indeterminate = false;
  align = 'start';
  disabled = false;

  onChecked() {
  this.checked= !this.checked;
  return false;
  }
}

component.thml

<mat-card class="result">
    <mat-card-content>
        <h2 class="example-h2">Result</h2>
        <section class="example-section">
            <div (click)="onChecked();">
                <mat-checkbox class="example-margin" [(ngModel)]="checked">
          not working checkbox :'( 
                </mat-checkbox>
        <span  style="background-color: #dddd00;">I want to be clickable too</span>
       </div> 

        </section>
    </mat-card-content>
</mat-card>

edited Mar 15, 2018 at 16:48

answered Mar 15, 2018 at 13:32

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

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

2 Comments

f0rt1s Over a year ago

Sorry, but I don't see how this helps with my problem. I know how to use a checkbox ;)

f0rt1s Over a year ago

Now you cannot check the checkbox. Only if you click on the "I want to be clickable too"-Part. Stackblitz

kbjerring · Accepted Answer · 2021-12-16 12:16:06Z

3

You can also just do this

<div (click)="checked = !checked">
  <mat-checkbox class="example-margin" [(ngModel)]="checked" (click)="$event.stopPropagation()">
    I'm a not working checkbox :'(
  </mat-checkbox>
  <span style="background-color: #dddd00;">I want to be clickable too</span>
</div>

answered Dec 16, 2021 at 12:16

kbjerring

6231 gold badge6 silver badges19 bronze badges

1 Comment

fonzane Over a year ago

Thanks. The (click)="$event.stopPropagation()" on the checkbox did it for me.

Elazar Zadiki · Accepted Answer · 2022-01-17 13:52:25Z

You could do that:

<div (click)="myCheckbox.toggle(); someFunctionWhenChecked(myCheckbox.checked)">
  <mat-checkbox class="example-margin" #myCheckbox (click)="$event.preventDefault()">
                I'm a not working checkbox :'(                  
  </mat-checkbox>
  <span style="background-color: #dddd00;">I want to be clickable too</span>
</div>

explanation:

Set a template variable for the checkbox - #myCheckbox, then prevent default behavior when clicking on checkbox so it wont contradict the action made by the div's click event.

On the div's click event just toggle the checkbox's state, and then if you want something to happen when the state is changed use the "someFunctionWhenChecked()" function to pass the new checkbox state.

Collectives™ on Stack Overflow

angular material checkbox surrounding div click

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related