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:

<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!

Leave a Reply

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

WordPress.com Logo

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

Google photo

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

Twitter picture

You are commenting using your Twitter 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.