How do I set up an Angular click-event handler?

_angular-click-event-handler.md

Code Examples for my Blog Post: How do I set up an Angular click-event handler?

The full Github repo can be found here: github.com/kevinchisholm/video-code-examples/tree/master/angular/templates-and-data/click-attribute

Video Demonstration

Setup

• Clone this repo:

git clone https://github.com/kevinchisholm/video-code-examples

• Move into the project directory:

cd angular/templates-and-data/click-attribute/

• Install Dependencies:

npm install

Local Web Server Instructions

Start the local web server:

npm start

Open the example web page:

http://localhost:3000/

home.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: 'src/home/home.html'
})
export class HomeComponent {
  content: string = "";
  count: number = 0;
  
  setMessage1 () {
    this.content = 'This is message # 1';
  }
}

home.html

<button (click)="setMessage1()">
Set Message # 1
</button>

<button (click)="content = 'This is message # 2'">
Set Message # 2
</button>

<button (click)="count = count + 1">
I've been clicked {{count}} times
</button>

<div>
    <h2>Content</h2>
    <p>{{content}}</p> 
</div>