Custom Attribute Directive In Angular

Introduction

In this article, we will learn about custom attributes directives in Angular. In this article, we create some custom attributes directive and use in our components.

In This Article

• What is directive?
• Create new Angular project.
• Built in Attributes Directives.
• Create custom attributes directive.
• Implement custom attributes directive in our components.

What is directive?

Directives are classes that add additional behavior to elements in your Angular applications. With Angular's built-in directives, you can manage forms, lists, styles, and what users see.

The different types of Angular directives are as follows:

• Components: directives with a template. This type of directive is the most common directive type.
• Attribute directives: directives that change the appearance or behavior of an element, component, or another directive.
• Structural directives: directives that change the DOM layout by adding and removing DOM elements.

Create new Angular project

Step 1: Open your folder where you want to save your project in Visual Studio Code or Command Prompt.

Step 2: Run below command to create new project. In this process you will be ask some question like add routing in your project and style sheet format etc. You can add as per your requirements.

ng new custom-directives

As you see in below image our project is created.

Step 3: As you now open your app component you see lot of code so we remove all the code and just add simple h1 tag as you see on below code.

<h1>This is Custom Attribute Directive Project</h1>

Step 4: Now run your project by simple move to your project directory and then run below command.

ng serve

After successfully run your project, you can see output like below image.

Built in Attributes Directives.

Attribute directives listen to and modify the behavior of other HTML elements, attributes, properties, and components. 

The most common attribute directives are as follows:

• NgClass: adds and removes a set of CSS classes.
• NgStyle: adds and removes a set of HTML styles.
• NgModel: adds two-way data binding to an HTML form element.

Create custom attributes directive.

Step 1: Create a new folder in your project’s app folder called directives to simplify project structure.

Step 2: Run below command to create new custom attribute directive. Here error is the name of our directive and directives is a folder name which we create.

ng g directive directives/error

After executing the above command, it will generate the following two files.

And it also adds our directive in app module file’s declaration section.

Step 3: Now we implement logic in this directive that if user use this directive in any element, the element color will became red. For that add below code in your file.

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appError]'
})

export class ErrorDirective {
  constructor(el:ElementRef) {
    el.nativeElement.style.color="red";
   }
}

Explanation

• In above code first we add ElementRef type parameter in constructor. It will get that element on which we use our custom attribute directive
• Then by using this el parameter we change color from style to red.

Implement custom attributes directive in our components.

To add our custom attribute directive we need to add attribute In our element. As you see in your directive file you see a selector in our case our selector name is appError, by using appError in our element we can change style of it.

Add this attribute in your element as shown in below image.

Now refresh you page in browser and you can see out like below image.

Conclusion

So as you see that we can create custom attribute directive easily. You can implement as your requirement. In future we will create some other custom directive which will be useful in our day to day projects. If you like this article kindly share with your friends and if you have any doubt let me know in comments.