Step 1- Concept- When you want to communicate data from the component logic to the template (or vice versa), this is called one-way data binding.

Step 2- Open up the /src/app/home/home.component.html file and replace it with the following:

<h1>Welcome!</h1>

<div class="play-container">
    <p>You've clicked <span (click)="myCountClick()">this</span> {{ myClickCounter }} times.</p>
</div>

We have a few things happening here:

• (click) – This is a click event
• {{ myClickCounter }} this will display data that’s retrieved from the component.

Visit the home.component.ts file and add the following code:

export class HomeComponent implements OnInit {

  myClickCounter: number = 0;

  constructor() { }

  ngOnInit() {
  }

  myCountClick() {
    this.myClickCounter += 1;
  }

}

Done!