Attribute Directives are used to change the behavior, appearance or look of an element on a user input or via data from the service. Essentially, there are three types of directives in Angular 2:
- Structural directives
- Attribute directives
In this post, we will learn how to create Attribute Directives in Angular 2. So let’s say we want to change the background color of an element; in that case we would apply the attribute directive to the element.
Create first Attribute directive
Let’s start with creating the Attribute Directive. To do this, we need to create a class and decorate it with @directive decorators. A simple attribute directive to change the color of an element can be created as shown in the next listing: