AngularTutorials

Learn Angular Step by Step – Session 7 : Angular Custom directives

We have discussed about the inbuilt directives in the last session. In this session we will be learning how to develop custom directives in angular. Since you know there are three types of directives in angular which is component, structural directives and attribute directives we can create custom structural directives as well as custom attribute directives. To demonstrate it I will create a custom attribute directive in this session.

Creating a attribute directive.

Since we want to demonstrate how to create a attribute directive here we will be developing a directive to make heading font to blue color. This is not a much needed function in our application. but you will find some cases when we need this kind of attributes in the upcoming sessions. For example we can use this kind of attribute to make some text highlighted when we are filtering them from a list. For the moment lets stick in to our example that we need to create a new directive to make the heading text with some specific styles.

As a first step I am going to create a new folder in src/app called “directives” to keep our custom directives. so right click the app folder from the left bar in vscode and create New folder

Now we will be using angular cli command to create the directive. So open the terminal and go the relevant location before creating the directive. ( If we run the create directive command in default location it will create a directive in app folder not in the directive folder.)

cd .\src\app\directives\

Then we need to run a command to generate a directive called lib-book-header

  ng g d lib-book-header

This will create two files in directives folder, unit test file ending with spec.ts and directive file. Lets go to the directive file.

When we using this as a attribute directive in our application we need to get the element which will be a div, p , header or some thing like that and add some styles to it. To get the element we are using elementRef. So in the constructor I am adding the following code.

private elementRef: ElementRef

You also need to import ElementRef from ‘@angular/core’ as you can see in the above image. Then I can access to the element via elementRef variable. So I will change the font color of element to blue adding following code inside constructor.

this.elementRef.nativeElement.style.color = "Blue";

Here you will find some strange words like nativeElement. You will be learning these kind of words while you follow the session. For the moment get it as property of elementRef where we can access the elements styles.Cool. Now we are done with creating the directive. We can use this directive in wherever we want to make the text color to blue by adding appLibBookHeader to the element. As a example let’s add this to book name in the books card. Let’s go to app.component.ts file and change the <h3> element to following code.

<h3 appLibBookHeader> {{Book.name}}</h3>

If you go back to your application you will see it as following image with changing book name color to blue.

Now you have a custom attribute directive. At this moment I wanted to show that we can create our own directives. We will be creating more directives in the upcomming sessions when we need them. Thats all for this session and let’s meet again with “Inter-component communication” in the next session.

Comment here