Custom Directives in Angular 7

Custom Directives in Angular 7

Getting started with Directives

Directives are the most powerful feature of any Angular applications. In fact, most commonly used feature, which is component, is itself a directive. There are basically three types of directives:

  • Component directive – a directive with templates.
  • Attribute directive –  a directive which manipulate DOM by changing behaviour and appearance
  • Structural directive – a directive which create and destroy DOM element

Component directive is what we are using it in our day to day programming since Angular 2. So, I am going to skip discussing about Component directive. In this post, we will briefly discuss the rest of the two directives: Attribute and Structural directives.

Structural Directives

Structural directives are used to add, remove or manipulate the elements from the DOM. It is easy to identify structural directives. Structural directives are prefixed by asterisk (*) with the directive name. Example of structural directives are : NgIf, NgSwitch & NgFor. These are inbuilt structural directives.

Attribute Directives

Attribute directives are used to change the behavior and appearance of an DOM element. As the name suggests, they are applied as an attribute on the DOM element.

Custom Directive

Let’s create our first custom directive. To generate the directive, run this command in the command terminal.

This command will generate a color.directive.ts file in the app folder.

color.directive.ts

In the first line, Angular CLI imported Directive from @angular/core package. This will provide the @Directive decorator.

The name of our directive is appColor in the [] selector. Angular will look for this attribute on the html element, and applies the directive logic to that element. This directive has a class name ColorDirective.

This command will also add an entry in our app.module.ts file as well. See the line 7 and 13 in app.module.ts file.

app.module.ts

Let’s put some code logic in our appColor directive. We are going to make the background color of an element Red. So, our directive code looks like this:

color.directive.ts

If you notice in line first, we also imported ElementRef

and injected this in our directive class constructor in order to access the element, on which this directive is applied.

After injecting ElementRef in our class constructor, we can now access the element here. So, let’s access the element and set its background color to Red.

This is how, we can create our basic directive. But how can we use it on any element?

To apply this directive, we have added appColor to <p></p> element.

See the complete code of app.component.html file.

app.component.html

Open the browse and see the page.

custom directive in angular 7

Here, we can see, our directive changed the red background color of the text.

So, in this way, we have modified the DOM through our custom directive. We have changed the color of p element through angular attribute directive.

Passing value to Custom Directive

In the above directive, we have hard coded the color code Red. It would be great, if we can make it dynamic, i.e, our directive can accept any color name from the element and render the background in same color. In order to make our custom directive dynamic, let’s tweak our code again.

color.directive.ts

In the line first, we have further imported OnInit from @angular/core.

OnInit

A lifecycle hook that is called after Angular has initialized all data-bound properties of a directive. Define an ngOnInit() method to handle any additional initialization tasks.

After importing OnInit, we implemented this directive in our class in line 6.

Let’s create an input property in our directive named same as our directive name.

Then implements the ngOnInit() method. In this method, we wrote the code of setting the background color of an element to the color, passed through element to our directive.

Now, let’s see the code in our html template file, how to use this directive now.

app.component.html

See these two lines in our template file. We have passed green & red color to <p></p> elements.

Note: String values must be passed with single quotes (‘) with double quotes (“).

Now, open the browser and see the page.

custom directive in angular 7

Passing value to Custom Directive by Component Class

To make our above code more simpler, we can declare two model property in our component class app.component.ts file.

app.component.ts

Now, you can see in line 10 & 11, we have created two model properties: greenColor & redColor. Then, we passed it to our custom directive through html template file.

app.component.html

In this way, we can pass custom directive values from the component class as well.

Summary

In this blog, we looked into different kinds of Angular Directives. And then we have created our custom directive. We also learned about how to pass value from html template file, and then from component class as well.

Read more:

Adesh

Hi, I am Adesh. I am a senior software engineer having more than 12 years of software development experience. I am a full stack developer and interested in writing the technical post on programming. I am currently working in New York City area.

This Post Has 5 Comments

  1. nice post

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu