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>
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'
}
}
@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: