Angular – Step 5 – One way data binding

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:


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

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;




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.