Event Binding example in angular

Open Command prompt and use below commands to create angular project

E:

cd E:\TestProjects\Angular

ng new Event-Binding-example-in-angular --style=scss --routing --skip-install

cd Event-Binding-example-in-angular

npm install

Open project in visual studio code.

Open app.component.ts file and update code as below

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

  constructor() { }

   Name = 'Hi Adi';

  ngOnInit() {

  }

  changeMyName() {

  this.Name = 'Hi JC.Adi';

}

}

Open app.component.html file and update code as below

<h1>Event Binding example in angular</h1>

<button (click)="changeMyName()">Name is changed on click of this button.</button>

<h1>{{Name}}</h1>

Output: