CODEWITHSUNDEEP
htmlangulartypescript
Antifa
Antifa

Reputation: 387

How to control multiple (click) events inside a table?

Hello I hope the title is descriptive enough to understand my problem,

I have this HTML code. In <td> i have attached a (click) function. Inside this <td>, I have another div which also has a (click) function attached. When I click the button inside <td> both functions are triggered. But, I would like only the (click) in div to be triggered when I click it and not the <td> (click). Is it possible to happen? 

<td mat-cell align="center" *ngFor="let option of options; let opt_indx = index"
    (click)="optionsClicked(opt_indx, i);" id="defaultBadge-wrapper">

    <div *ngIf="!rowCommands[i].defaultSelected[opt_indx]" class="defaultBadge">
        <a class="badge badge-secondary" matTooltip="Click here to set this Option as Default"
            (click)="markDefault(i,option.id)">Default</a>
    </div>
</td>

Typescript code

markDefault(index, option: string) {
    alert('this function triggered');
}

optionsClicked(option, rule) {
    alert('I dont want this function to be triggered when i click markDefault');
}

Upvotes: 0

Views: 311

Answers (3)

Abhishek Gautam
Abhishek Gautam

Reputation: 1767

In ts method pass the $event as param and include

event.stopPropagation();

or in the click event pass another function: 

(click)="markDefault(i,option.id); event.stopPropagation();">Default</a>

Upvotes: 2

Kamuran S&#246;necek
Kamuran S&#246;necek

Reputation: 3333

just add $event.stopPropagation() to inner click.

<div *ngIf="!rowCommands[i].defaultSelected[opt_indx]" class="defaultBadge">
    <a class="badge badge-secondary" matTooltip="Click here to set this Option as Default"
        (click)="$event.stopPropagation();markDefault(i,option.id)">Default</a>
</div>

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41387

use the stoppropagation to prevent the event from propagating 

(click)="markDefault(i,option.id); event.stopPropagation();">Default</a>

Upvotes: 1

Related Questions