Molto spesso capita di dover creare pulsanti con un HTML complesso per dare la possibilità di aggiungere icone a destra o sinistra del test, per dare uniformità di stile o per aggiungere determinati comportamenti. Per evitare di scrivere codice HTML duplicato per ogni pulsante, possiamo creare un component che al suo interno include tutto il codice HTML e di logica necessario al corretto funzionamento del pulsante.
Il nostro component deve esporre un evento che corrisponde al click del pulsante interno. Se chiamiamo l'evento click, Angular eseguirà l'evento due volte, una per il pulsante e una per il tag che viene renderizzato in HTML per il component.

<!--component-->
<button class="btn btn-primary btn-sm" (click)="bubbleClick($event)">
  <i [class]="iconFirst" *ngIf="iconFirst"></i>
  <ng-content></ng-content>
  <i [class]="iconLast" *ngIf="iconLast"></i>
</button>import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html'
})
export class ButtonComponent implements OnInit {

  @Output() click = new EventEmitter();

  bubbleClick(event: Event) {
    this.click.emit();
  }

}

Come detto, in questo caso l'HTML dichiara un evento click per il pulsante dentro il component, e ne dichiarerà un altro per il tag che contiene il component (). Per evitare che il lcick sul pulsant scateni due volte l'evento possiamo o dare un nome diverso all'evento del component (ad esempio handleClick), oppure evitare cge l'evento risalga la catena attraverso il memtodo stopPropagation.

bubbleClick(event: Event) {
  event.stopPropagation();
  this.click.emit();
}