Home » JavaScript » Angular.js » AngularJs 2 Series: Custom Property Binding

About Rajeev Hathi

Rajeev Hathi
Rajeev is a senior Java architect and developer. He has been designing and developing business applications for various companies (both product and services). He is co-author of the book titled 'Apache CXF Web Service Development' and shares his technical knowledge through his blog platform techorgan.com

AngularJs 2 Series: Custom Property Binding

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 [email protected]/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 [email protected]/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 [email protected]/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.

Reference: AngularJs 2 Series: Custom Property Binding from our WCG partner Rajeev Hathi at the TECH ORGAN blog.

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Want to take your WEB dev skills to the next level?

Grab our programming books for FREE!

Here are some of the eBooks you will get:

  • PHP Programming Cookbook
  • jQuery Programming Cookbook
  • Bootstrap Programming Cookbook
  • Building WEB Apps with Node.js
  • CSS Programming Cookbook
  • HTML5 Programming Cookbook
  • AngularJS Programming Cookbook