[Angular Tutorial] - 02 - Expressions, Property binding and Event binding

In this post, we're going to learn how to use expressions on template, also how to bind properties and events between component class and view.

{{ expression }}

In Angular 2+ we use double curly braces {{ }} to bind expression on template.

Inside {{ }} you can:

  • bind data {{ name }}
  • do Math {{ numberOne + numberTwo }}
  • ternary operator (?) {{ isWeekend ? 'Enjoy Weekend!' : 'Back to work!' }}
  • concat string {{ 'Hello ' + name }}
import { Component } from '@angular/core';

@Component({
  selector: 'template-fundamentals',  
  template: `
    <h2>02 - Expressions, Property binding and Event binding</h2>
    <div>
      <h3>1. Expressions</h3>
      <p>Binding component property data: {{ name }}</p>
      <p>Result of 1 + 2 = {{ numberOne + numberTwo }}</p>
      <p>{{ isWeekend ? 'Enjoy Weekend!' : 'Back to work!' }}</p>
    </div>    
    `
})
export class TemplateFundamentalsComponent  {  
  name: string = 'John Wick';
  numberOne: number = 1;
  numberTwo: number = 2;
  isWeekend: boolean = true;
}

NgNonBindable

In case you don't want Angular to bind data to your expression you can tell it skip binding by using NgNonBindable.

<div>  
 <p>Binding component property data: <pre ngNonBindable>{{ name }}</pre></p>
</div>  

In the result:

Binding component property data: {{ name }}  

Property binding

It's how we're binding data from component class to HTML elements.

Angular provide the way how we binding data to HTML element's properties. For example, we can bind data to innerHTML property of a div tag.

For Property binding Angular uses square brackets [ ].

<div [innerHTML]="name"></div>  
// equivalent in Javascript
// element.innerHTML = name;

// result
// <div>John Wick</div>

Or we may have an image and we want to display it on HTML, we can use:

// in component class
logoUrl: string = 'img/logo.svg';

// in template
<img [src]="logoUrl" />  

And for some elements which user can update value like input:

<input type="text" [value]="name" />  

This input will be filled "John Wick" as result of binding.

Note: It is one-way data binding, as you can only set data from the component to the view.

Event binding

So how about onclick, onblur, onchange... events of a HTML element. It's very simple in Angular, let's go ahead to an example below:

<input type="text" (click)="onClick($event)" (change)="onChange($event.target.value)" [value]="name" />  

For Event binding Angular uses parentheses ( ).==

Corresponding each event we have a function to handle it, e.g. onClick for click event.

But what is $event argument? It's event object that contains all information about the click you have just made, e.g. clientX, clientY, target values and so on.

Now we're handling events on component:

onClick(event) {  
  alert('You click on ' + event.target.nodeName);
} 

onChange(value: string) {  
  alert('Input value has changed to ' + value);
}

You can try by yourself with blur, mouseenter, keyup... events to see how it works.

Conclusion

After this post, I hope you will gain some ideas about Expression, Property binding and also Event binding in Angular.

See you next post, Two-way data binding.

Nguyen Tran

I'm Nguyen, a full stack web passion for frontend and love Angular.

Subscribe to Nguyen Tran

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!