angular - How to use Button click event

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  counter:number = 0;
  countUp(){
    this.counter++;
  }
}

app.component.html

<h2>Angular Button Click Event</h2>

<button (click)="countUp()" style="padding:12px;">
    Count Up
</button>

<h3>{{counter}}</h3>

More Angular tutorials

• angular - How to create function
• angular - Display value using interpolation
• angular - Interpolation JavaScript method
• angular - Interpolation call method
• angular - How to use if then condition
• angular - How to use if statement
• angular - Loop through an array of objects
• angular - How to use nested loop
• angular - How to call function on Button click
• angular - Text input on change listener
• angular - How to get text input value
• angular - How to create a counter
• angular - Generate random number in range
• angular - Generate random whole number
• angular - How to submit form data