Custom @Directive In Angular 5

In this article, we are looking out the most amazing feature of angular 5 @directive. we create custom @directive in angular 5 so directive is created for changing the behavior of the element. Directive and Component are both an angular object that corresponds to elements in the markup and can modify the resulting user interface. Basically, they both have selectors. So selectors are specially created to identify the element.

Create Custom @Directive in Angular 5

The directive has a @Directive annotations. So Basically directive add behavior to an existing DOM Element. The Directive will make you create custom attributes for your application. we will show you both two ways to create the application.

So Let’s check out the example.

Creating an Angular App

So following are the few commands that create our angular app.

This command will create your angular application.

This command will create a Directive in your app component section. So you will see the sizer.directive.spec.ts file and also see the sizer.directive.ts file. The third row updates the app.module.ts file and imports the directive module.

make sure you are inside the application if not then enter this command.

This command helps to enter into the application folder. After this execute the ng generate directive command. Then this will work fine.




In this file, we will create some class property and access it in the render file.

So the title property is set to the string that represents the message.


In the sizer.directive.ts file, we are creating the CSS style for the DOM Element. So in this file, we will just change the font size and color. we are looking out both two ways to specify the style for the DOM Element.

In the above code, we just imported the ElementRef, Renderer, Component, Input, and OnInit classes. After that, we select the directive using the selector and specify the attribute in the [ brackets ].

After that in the class, we create two properties of Input Function and specify sizer and color property.

In the Constructor, we had specified the ElementRef and Renderer Property.

After that we created a ngOnInit() function that execute with the application start.

So we had specify the setElementStyle function and specify the css property in this function.

So in the first parameter we need to specify the element reference and then specify the css style and then specify the input property. Now this will create the sizer and color property work like a font size and color css property.


In this file we will use the attributes of the directive annotation.

So in this code you will see how to specify the sizer as a font size and color as a color property of css.

These property will work like a CSS font family and color property. But here you do understand that we change the behavior of the element using sizer directive so make sure you specify the sizer directive for the DOM Element.

Second Way


Here is the second way to create style for your DOM element.

So in this code you will see we had remove the ngOnInit() Function and specify the native style for the native element. Here we specify the font size and color for the element. Using this method you cannot specify the attribute to the HTML element but you can specify the css property using constructor.


Here we just change the few thing here.

here we just specify the sizer attribute then you will see the css style effect to the DOM Element.

Now just run the application using this command.


After this, you will see the result.

That’s it.

Now you are able to make a Custom Directive in angular.

If you have any question then comment us and share this article to help people.

we will see you in the next article.