By default, Angular has a bunch of directives that mirror HTML DOM Events. The most common one is the click event. Let's say you have a button like this inside an Angular HTML Template:

view plain print about
1<button>Click Here</button>

You want to run code in your type script component class whenever this button is clicked. First, you can use Angular's click directive, like this:

view plain print about
1<button (click)="onButtonClick()">Click Angular Directive</button>

The directive, click, is put in parenthesis. This the angular syntax for listening to events. It means when the click event occurs, run the onButtonClick() function.

Inside your component's type script class, create an onButtonClick() function:

view plain print about
1onButtonClick(): void {
2 debugger;
3 console.log('button click w/ Angular directive');

Run the code and you should see this:

The code behind this sample is in this Blog's Github.