Home » JavaScript » Angular.js » AngularJs 2 Series: Binding The Host Element With @HostBinding

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: Binding The Host Element With @HostBinding

Introduction

In one of the previous article Build Your Own Directive, I showed you how to build or develop a custom highlight attribute that highlights the text background with yellow. We made use of Renderer service to render an element with the background style color to yellow. The element reference (which contained the text) was obtained using ElementRef type. We bound the style.background attribute of that element with the value of yellow using the setElementStyle method of the Renderer service. In this article I will use the same Typescript class and show you the alternate way to highlight the hosting element. We will use something called as @HostBinding decorator or meta data.

Using @HostBinding

The @HostBinding decorator can be used to bind a value to the attribute of the hosting element, in our case, the element hosting the highlight directive. Let’s look at the code that makes use of @HostBinding decorator.

import { Directive, HostBinding } from [email protected]/core';

@Directive({
  selector: ''
})
export class HighlightDirective {

	private color = "yellow";
	
	@HostBinding('style.backgroundColor') get getColor() {
		return this.color;
	}
	
	constructor() {
	}

}

The above is the same directive class with the highlight attribute. The only difference is here now we are rendering the element color to yellow using @HostBinding decorator instead of the Renderer service. Let’s walk through the code. First we define a property named color and set its default value to yellow. Next we define the @HostBinding decorator which is part of core Angular package. The said decorator accepts the name of the attribute to which we want to bind the value in the hosting element. The attribute in this case will be style.background because we need to set the background color. The get is a built-in concept of Typescript which acts like getter function to the property. The getColor() method acts as a property to the get ‘getter’ which simply returns the value of the color property.

The getColor() method name has nothing to do with the color property that we have defined. The method name can be anything and it should return the value which is eventually bound to the hosting element.

Upon running the application, you should see the text with highlighted color as yellow.

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

 

 

One comment

  1. HI, IT VERY USEFULL FOR ME, THANKS TO WEBCODGEEKS

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