Clickable ion-item with clickable ion-icon inside

Hi all,
I did not manage to find a proper answer to this issue.
Actually it is working, but clicking on the icon also clicks the item itself.
I would like to create a list of clickable items and at the “end” slot to have an icon which toggles a different function.
Currently I solved it my making the clickable instead of the item itself.
But it would be way better to isolate each of the clicks, when the item itself is clickable.
Thank you!

If you have one clickable item within another clickable item, you’ll need to stop the propagation of the click from that item to it’s parent:

Say you have this:

<div (click)="one()">
  <p>Some text...</p>
  <div (click)="two()">

You would change this line:

<div (click)="two()">

to this:

<div (click)="two($event)">

And then in your event handler within your component:

two(event) {

This will cause the click handler for the parent (i.e. one()) from firing.

1 Like

Thank you very much, @nvahalik ! :slight_smile:

For some reason it still fires in my code:

  <ng-container *ngFor="let item of channels">
    <ion-item [routerLink]="['/', 'schedule',, 'date']">
      <ion-avatar slot="start">
        <img src="{{item.logo}}">
      <ion-label>{{ item.title }}</ion-label>
      <ion-buttons slot="end">
        <ion-button (click)="favoriteChannel($event,">
          <ion-icon slot="icon-only" name="star-outline"></ion-icon>
favoriteChannel(event: Event, variable1: any) {
    this.favoriteService.favoriteChannel(variable1).then(() => {
      this.isFavorite = true;

Can you see anything wrong in my code?

Actually, you mind need to do one or more of the following:


You are right!! I added event.preventDefault(); and it worked!!
Thanks a lot @nvahalik , you rock!
And Ionic is awesome! I wish you and the Ionic team all the best!