Click issues with custom component

Ionic Framework ionic-v3
1

I have created a custom view component and passing an array to it from home.html:

<city-component [cities]="cities"> </city-component>

This is the code I have in the custom component, city-component.ts:

@Component({
  selector: 'city-component',
  templateUrl: 'city-component.html'
})
export class CityComponent {

  @Input() cities: any = []; 

  constructor(public navCtrl: NavController) { }

  goToCityPage() {
    this.navCtrl.push(AboutPage)
  }

  ToggleFavorite(city) {
    city.favorited = !city.favorited;
    if(city.favorited) {
      city.favoriteCount++;
    } else {
      city.favoriteCount--;
    }
  }

  goToProfilePage() {
    this.navCtrl.push(ContactPage)
  }
}

I have two issue in this:

  1. When I click on the heart of the first image, ToggleFavorite() is not working but it works on all other images and also on all the bottom left heart icons including the first image.
    image

  2. When I click on the heart of all other images, it seems that the click propagates to the first image too and ToggleFavorite() is called twice.

I’m not getting these issues when I don’t have a custom component and all the code is in home.html

I’ve created a git repo which replicates this issue:
ionic-click-demo