Ejecutar evento click desde otro componente con Angular.js

Uno de los temas mas recurrentes al hablar de Angular, es ¿Cómo compartir información entre componentes? Es posible compartir información desde un componente padre hacia el hijo y viceversa desde un componente hijo hacia el padre; En esta ocasión veremos este caso, como es que el componente hijo lanza información empleando la directiva @Output(), información que es atrapada  por el componente padre.    Pongamos como ejemplo una situación  puntual en el que tenemos un botón como componente y queremos hacerlo re utilizable en distintas partes de nuestro código.

Pensando de forma gráfica nuestro componente botón engloba el código HTML, su estilo CSS y su lógica, para no estar repitiendo el mismo código en diferentes lugares esquemáticamente lo representaríamos así... 

Para este caso, la información necesaria vendrá desde el componente hijo. Un único componente btn que contendrá todo el código necesario tanto de estilo como de lógica; Los componentes parde 1,2, y 3 harán llamado a este componente btn para renderizarlos en ellos y esperar el momento en el que el componente btn lanza algún tipo de información.

Nuestro componente btn (componente hijo)

Como se menciono anteriormente, todo se detona desde el elemento hijo, que es el elemento que lanzará la información deseada, para este caso será un evento click...

 //En el archivo ts
 @Output() public handleClickOutput = new EventEmitter<MouseEvent>();
  
  handleClick(event:MouseEvent){
    this.handleClickOutput.emit(event);
  }

En el archivo ts del componente hijo (componente btn, figura anterior) mediante el decorador  @Output() declaramos nuestro emisor, para luego invocar el método emit() dentro de la función que vamos a bindear   con el archivo html del componente y así emitir el valor que viene del mencionado archivo html  del componente (en este caso el valor a emitir es un evento del mouse, pero puede ser de cualquier tipo...  number, any, string etc. ) como vemos a continuación.

 
<button (click)="handleClick($event)" class=" btn bg-success btn-round btn-add-to-cart">
    <i class="material-icons">
      add_shopping_cart
    </i>
    Agregar
</button>

Como se observa en la figura anterior, al evento click lo bindeamos con el método que lanzara en este caso el evento pasándolo  por parámetro     (click)="handleClick($event)"  

En el componente padre

En el componente padre desde el archivo html cachamos la emisión desde el componente hijo con este fragmento de código    (handleClickOutput)="showMsg()"  y ejecutamos el método  que contiene la acción que deseamos en el archivo ts del componente padre...

<!-- en archivo html -->
<app-btn (handleClickOutput)="showMsg()">
</app-btn>

En el archivo ts del componente padre, la función que queremos ejecutar desde el componente hijo.

 //En el archivo ts
showMsg(){
  console.log('ejecutando evento padre');
}

Es importante que no este no es el único método para compartir información entre componentes, pero por el momento es un buen comienzo.