Click Event in Angular

AIM: Add an event to the hello component template and when it is clicked, it should change the course name.

Step-1: First edit the hello.component.html with the following code.

hello.component.html

<h1>Hello Govardhan!</h1>
Course is {{ courseName }}<br>
<button (click)="ChangeCourse()">Change Course</button>

Step-2: Edit the hello.component.ts with the following code.

hello.component.ts

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

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  courseName = 'JavaScript'
  ChangeCourse(){
    this.courseName = 'Angular'
  }
}

Step-3

Run the following command to build and serve your app.

.../first-app> ng serve

Open browser and enter the URL http://localhost:4200 to find the application.

Output: