title: Angular click event triggers on entire component in recursive nested component
body: <p>I have 2 components - list view component detail component. The detail component is being rendered recursively and has a click handler.</p>
  
  <p><strong>List View Component</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;app-basket-item-detail *ngFor="let rootBasketItem of rootBasketItems$ | async"
                          [basketItemId]="rootBasketItem.basketItemId"
                          [basketItems]="allBasketItems$ | async"
                          [offeringsCache]="offeringsCache$ | async"
                          (removeBasketItem)="removeBasketItem($event)"&gt;
  &lt;/app-basket-item-detail&gt;
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>@Component({
    selector: 'app-basket-item-list-view',
    templateUrl: './basket-item-list-view.component.html',
    styleUrls: ['./basket-item-list-view.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class BasketItemListViewComponent {
    rootBasketItems$: Observable&lt;Array&lt;BasketItem&gt;&gt;;
    allBasketItems$: Observable&lt;Array&lt;BasketItem&gt;&gt;;
    offeringsCache$: Observable&lt;any&gt;;
  
    constructor(private store: Store&lt;fromRoot.State&gt;) {
      this.rootBasketItems$ = store.select(fromRoot.getRootBasketItems);
      this.allBasketItems$ = store.select(fromRoot.getBasketItemsMap);
      this.offeringsCache$ = store.select(fromRoot.getOfferingsCache);
    }
  
    removeBasketItem(basketItem) {
      this.store.dispatch(new basketActions.RemoveBasketItem(basketItem));
    }
  }
  </code></pre>
  
  <p><strong>Detail Component (recursive detail component)</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="basket-item-list"&gt;
    &lt;li class="basket-item-action justify-content-between" [ngClass]="basketItem?.action.toLowerCase()"&gt;
      &lt;span&gt;{{ offeringsCache[basketItemId]?.description }}&lt;/span&gt;
      &lt;button class="close" (click)="removeBasketItem.emit(basketItem)"&gt;
        &lt;span&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/li&gt;
  
    &lt;app-basket-item-detail *ngFor="let childBasketItemId of basketItem.children"
                            [basketItemId]="childBasketItemId"
                            [basketItems]="basketItems"
                            [offeringsCache]="offeringsCache"
                            (click)="removeBasketItem.emit(basketItems[childBasketItemId])"&gt;
    &lt;/app-basket-item-detail&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>@Component({
    selector: 'app-basket-item-detail',
    templateUrl: './basket-item-detail.component.html',
    styleUrls: ['./basket-item-detail.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class BasketItemDetailComponent implements OnInit {
    @Input() basketItemId: string;
    @Input() basketItems: Array&lt;BasketItem&gt; = [];
    @Input() offeringsCache: [string, BasketItem] = [undefined, undefined];
  
    @Output() removeBasketItem = new EventEmitter&lt;BasketItem&gt;();
  
    basketItem: BasketItem;
    offering: ProductOffering;
  
    ngOnInit(): void {
      this.basketItem = this.basketItems[this.basketItemId];
      this.offering = this.offeringsCache[this.basketItemId];
    }
  
  }
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>The view where the list is rendered looks like this:
  <a href="https://i.stack.imgur.com/HxLcx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HxLcx.png" alt="Basket View"></a></p>
  
  <p>What is giving me a headache is that the click event is also triggering not only when I click the X, but it also triggers when I click on the <code>li</code> element. Is there a cure for that? I have been trying everything I can think of to stop it from behaving like that. I want the click events only be handled by the button.</p>
  
  <p>Any ideas?</p>