AngularJs 2 Series: Custom Property Binding

Rajeev HathiDecember 26th, 2016Last Updated: December 26th, 2016

0 66 2 minutes read

Introduction

In one of the previous article on databinding, I demonstrated the use of native property and event binding. Here I will show you how you can achieve custom property binding. Custom property binding is all about creating your own property and binding a value to it from outside or another component. We will create a component with a custom property and bind the data to it from another component.

Custom Property Binding

Let’s create a component class and name it as CustomPropertyBindingComponent. The class will have a custom property named amount which will have a default value as 100. Using custom property binding feature, we can set the value of the amount property from outside of this component. Let’s first take a look at the code:

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

@Component({
  selector: 'my-amount',
  template: `
  <div>The current amount is {{amount}}</div>
  `,
  styles: []
})
export class CustomPropertyBindingComponent {
	@Input() amount: number = 100;
}

The above component class CustomPropertyBindingComponent has an amount property of type number which has a default value set as 100. The component selector name is <my-amount> which will be the HTML element that will be used to display the amount value. Now to set the value of amount from outside we need a special meta data named @Input() prefixed to the amount property. It means that our property amount is bindable from outside i.e. you can dynamically change the value of amount property from the template of another component. The Input meta data is part of core angular package.
Let’s create another component called MainComponent and here we will set and display the value of our custom property amount using <my-amount> selector of the CustomPropertyBindingComponent component class.

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

@Component({
  selector: 'app-main',
  template: `
  <my-amount></my-amount>
  `,
  styles: []
})
export class MainComponent {
}

From the above code, we are simply displaying the default value of the amount which is 100. Note the use of <my-amount> selector to display the value of our custom property amount. The output will look like the following:
The current amount is 100
So far so good. Now let’s set the new value to the amount property.

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

@Component({
  selector: 'app-main',
  template: `
  <my-amount [amount]="500"></my-amount>
  `,
  styles: []
})
export class MainComponent {
}

As you can see from the above code we are able to use our amount property to set the new value. This amount property is part of CustomPropertyBindingComponent component class and it is made bindable from outside through the use of @Input metadata. The code above uses [amount] property (square bracket means this is a property binding) and set the new value as 500. The resulting output will be as follows:
The current amount is 500
The value now is changed to 500. We passed the new value 500 from outside i.e from the MainComponent to the amount property of CustomPropertyBindingComponent component.