Angular 10 click event propagation

Question

I want to manually modify the value of an input checkbox by clicking everywhere on its html parent.

Here is my HTML:

<div (click)="onChange($event)" class="option" *ngFor = "let option of answerForm.options">
    <input type="checkbox" name="{{answerForm.type}}{{answerForm.id}}" value="{{option}}">
    <label>{{option}}</label>
</div>

Here is my typescript:

onChange($event): void {
    if ($event.target !== $event.currentTarget) {return;}
    $event.target.children[0].checked = !$event.target.children[0].checked;
}

The event works correctly when I click on the div.
When I click on the label, the event is trigger, with the label as a target and doesn't pass the condition as expected.
I expect the event propagation to automatically trigger the event for the parent, but it doesn't. It seems to be the default behavior of Angular but I am not really sure.

Do you have any solution to only trigger the click event for the div wherever the click is made on it ?

If you're trying to prevent the default behavior, you could try putting '$event.preventDefault()' as the first line of the onChange method. — Dream_Cap
– Dream_Cap, Commented Nov 15, 2020 at 0:14

Shivam · Accepted Answer · 2022-03-21 00:04:29Z

2

Since what you are trying to do is always have the parent as the target of the click event instead of the children. You can use the css property pointer-events setted to none.

In the following way,

<div (click)="onChange($event)" class="option" *ngFor = "let option of answerForm.options">
<input type="checkbox" style="pointer-events: none" name="{{answerForm.type}}{{answerForm.id}}" value="{{option}}">
<label style="pointer-events: none">{{option}}</label>

Why does this work?

As it's said in Mozilla MDN Web Docs, the pointer events sets under what circumstances (if any) a particular graphic element can become the target of pointer events. In the case of the value none,

The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases

For more information you can visit https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

edited Mar 21, 2022 at 0:04

Shivam

3,6622 gold badges15 silver badges30 bronze badges

answered Nov 15, 2020 at 0:46

Eliezer Veras Vargas

2241 silver badge9 bronze badges

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

4 Comments

Ali Bigdeli Over a year ago

Welcome to stackoverflow, your answer is only contains about code and it needed to add more detail in it. for more information about good answers in StackOverflow please see stackoverflow.com/help/how-to-answer .

Eliezer Veras Vargas Over a year ago

Is it better this way? Thanks so much for the feedback.

Ali Bigdeli Over a year ago

yes it is, I voted up your answer because it has a good quality ,thanks for your cooperation, good luck ...

Hedi Zitouni Over a year ago

Thank you ! It works for me :). I didn't knew this css property

Oleksii Pavlenko · Accepted Answer · 2020-11-14 22:15:11Z

0

As I understood, You can prevent any triggered events with css, for example add input and label style - pointer-events : none

<div (click)="onChange($event)" class="option" *ngFor = "let option of answerForm.options">
    <input type="checkbox" style="opinter-events: none" name="{{answerForm.type}}{{answerForm.id}}" value="{{option}}">
    <label style="opinter-events: none">{{option}}</label>
</div>

edited Nov 14, 2020 at 22:15

answered Nov 14, 2020 at 21:56

Oleksii Pavlenko

1,3331 gold badge12 silver badges25 bronze badges

1 Comment

Hedi Zitouni Over a year ago

Same thing that I said to Philip, this is the solution I choose but you have a miss spelling of pointer-events

Kavinda Senarathne · Accepted Answer · 2020-11-15 03:45:18Z

0

Try this :

import {Directive, HostListener} from "@angular/core";
    
@Directive({
    selector: "[click-stop-propagation]"
})
export class ClickStopPropagation
{
    @HostListener("click", ["$event"])
    public onClick(event: any): void
    {
        event.stopPropagation();
    }
}

Then just add it to the element you want it on:

<div click-stop-propagation>Stop Propagation</div>

answered Nov 15, 2020 at 3:45

Kavinda Senarathne

2,01015 silver badges16 bronze badges

Comments

Filip · Accepted Answer · 2020-11-16 10:24:40Z

0

You should use <input type="checkbox" name="{{answerForm.type}}{{answerForm.id}}" value="{{option}}" style="pointer-events: none">

edited Nov 16, 2020 at 10:24

answered Nov 14, 2020 at 22:10

Filip

1431 silver badge8 bronze badges

1 Comment

Hedi Zitouni Over a year ago

This is what i decided to use, on input and label. You should edit you answer to write pointer-events instead of opinter-events. But thank you for your response

Collectives™ on Stack Overflow

Angular 10 click event propagation

4 Answers 4

4 Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related