Angular 6 for Enterprise-Ready Web Applications

Adding custom events in Angular

Now, let's edit the Angular code to trigger the events:

1. Observe the POS template with a Checkout button:

src/app/pos/pos/pos.component.html...  <button mat-icon-button (click)="checkout({amount: 12.25})">    <mat-icon>check_circle</mat-icon>  </button>...

The circular checkout button is pointed out at the bottom-left corner of the following diagram:

POS Page with Checkout Button

Optionally, you can add an onclick event handler directly in the template, like onclick="dataLayer.push({'event': 'checkoutInitiated'})" on the checkout button. This pushes the checkoutInitiated event to the dataLayer object, made available ...