Data Binding not working in Angular, why?

Question

I am learning Angular now. And i am just stuck in a Data binding concept. I have wrote below code in 2 file. But it won't work.

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  constructor(){}
  name = 'Rakesh';
  ngOnInit(){
  } 
  changeMyTitle() {
    this.name = 'Rocky';
  }
}

app.component.html

 <p>My name is {{ name }} </p>
" Here is a Button code in Html calling changeMyTitle()"

Answer 1

You need to bind click event to your button and invoke changeMyTitle() defined in your component.

Just use this in your HTML:

<p>My name is {{ name }} </p>
<button (click)="changeMyTitle()">Change name</button>

here is the stackblitz with working example.