Angular2 – Attribute Directives

Directives give us the ability to create tags which can be directly used in the template. Since they are not HTML5 templates, we need to define how Angular can render these components In the end, they would be converted to a representation that a browser understands.

Angular can convert these directives and translate to the corresponding HTML5 and javascript code, which browser understands.

Types of Directives

There are three types of directives in angular2:

1. Component Directives:

   Components are displayed using the selectors used in the decorator when we create a component.

2. Structural Directives:

   Change the DOM structure.

3. Attribute Directives

   Change the appearance or behavior of an existing DOM element.

Attribute Directives

As discussed above, attribute directives allows changing the behavior and / or appearance of an existing DOM element. In this post, we are just discussing Attribute Directives.

A directive’s type is decorated with @Directive decorator. Please check selector and change in accordance with your naming convention if required. No, it doesn’t have to implement an interface or inherit from some special type.

Angular CLI also performs the necessary plumbing required in the app.module. It automatically imports the directive and adds it to the Declarations section.

Attribute with Defaults

Let’s first update our directive with some default properties. In the following case, the directive is causing a rotation of 90% by keeping the transform-origin as 50% 50%. It also adds a background color ‘cyan’.

We can easily use this directive in our template as follows (app.component.html).

The page is displayed as follows:

You can notice that it is rotated 90 degrees as expected.

Listening to Directive’s Host Element

We can also listen for events from directive’s host element. In this case we are listening to mouseenter event from Host. As the event is triggered, we are trying to update the rotation angle to the input property rotationAngle.

We also need to update the component’s template to use the input property. Here we are just setting it to 45 literal value.

As we run the app, page is displayed with the element rotated at 90 degrees.

As we mouse over the element, the rotation is updated to 45 degrees as follows:

Using Directive’s selector for Property Binding

Angular2 also allows the directive to be used for property binding to one of it’s own input properties. We just need to use the directive name for input property. Here we are using appRotated for rotationAngle property.

And here is how we are using the binding using directive’s name.

Using Renderer to set Style Properties

Up until now we are directly using the element’s style properties to set the background color. An alternative is to use Renderer. The Renderer class is a built-in service that provides an abstraction for UI rendering manipulations. Here we are using Renderer to set the backgroundColor from the style of the nativeElement for the ElementRef.

Directive’s @Input Binding to Template Properties

We can also bind directive input properties to the properties of the component. Here we are adding a new property myangle to app.component. We are assigning property a value of 145.

Now we can use this property to bind in the component’s template.

The component can also implement OnInit and assign the property value in the implementation method as follows:

Property Binding & Constructor

It must be remembered that the property binding values are picked up after the directive is constructed. If we try to get the value, it would be undefined as below:

The solution is to implement OnInit by the directive and use the necessary initializations in the OnInit method:

Code