One of the key features of Angular is directives. Angular directives are a way for you to add behavior to DOM elements. Angular provides a variety of built-in directives, and you can also create custom directives in this robust framework.
What Are Directives?
Directives are custom codes that Angular uses to modify the behavior or appearance of an HTML element. You can use directives to add event listeners, change the DOM, or show or hide elements.
There are two types ofbuilt-in directives in Angular, structural and attribute. Structural directives change the structure of the DOM, while attribute directives change the appearance or behavior of an element. Directives are a powerful way to extend the functionality of Angular components.
Benefits of Directives
Here are some of the benefits of using directives in Angular:
Setting Up Your Angular Application
To set up an Angular application, install the Angular CLI by running the following code in your terminal:
After installing the Angular CLI, create an Angular project by running the following command:
Running the command above will create an Angular project namedcustom-directives-app.
Creating a Custom Directive
Now you have an Angular project and can begin creating your custom directives. Create a TypeScript file and define a class decorated with the@Directivedecorator.
The@Directivedecorator is a TypeScript decorator used to create custom directives. Now create ahighlight.directive.tsfile in thesrc/appdirectory. In this file, you will create the custom directivehighlight.
For example:
The code block above imports theDirectivedecorator from the@angular/coremodule. The@Directivedecorator decorates theHighlightDirectiveclass. It takes an object as an argument with aselectorproperty.
In this case, you set theselectorproperty to[myHighlight]meaning you can apply this directive to your templates by adding themyHighlightattribute to an element.
Here is an example of how to use the directive in your templates:
Adding Behavior to the Directive
Now you have successfully created a directive. The next step is to add a behavior to the directive so it can manipulate the DOM. You will need theElementReffrom @angular/core to add a behavior to a directive.
You will inject ElementRef into the directive’s constructor. ElementRef is a wrapper around a native element inside a view.
Here’s an example of how you add a behavior to a directive:
In this example, the constructor of theHighlightDirectiveclass takes an ElementRef parameter, which Angular automatically injects. The ElementRef provides access to the underlying DOM element.
Usingthis.element.nativeElementproperty, you access the native DOM element of theelementparameter. You then set the component’s background color tolightblueusing thestyleproperty. This means that whatever element you apply themyHighlightdirective to will have a light-blue background.
To make the directive functional, ensure you import and declare it in theapp.module.tsfile.
Now you can apply the myHighlight directive to the elementsin your Angular components.
Run your application on the development server to test if the directive is functional. you may do this by running the following command in your terminal:
After running the command, navigate tohttp://localhost:4200/on your web browser, and you will see an interface that looks like the image below.
Angular built-in directives accept values to change element appearance, but the custom directivemyHighlightdoes not. You can configure the directive to accept a value it will use to dynamically set the template’s background color.
To do this, replace the code in thehighlight.directive.tsfile with this:
In the code block above, theHighlightDirectiveclass contains a setter method calledmyHighlight. This method takes acolorparameter of the type string. You decorate the setter method with the@Inputdecorator, allowing you to pass the color value into the directive from the parent component.
Now you may determine the background color by passing a value to the myHighlight directive.
Creating a Custom Structural Directive
In the previous sections, you have learned how to create, add behaviors, and apply custom attribute directives to your template. Attribute directives change the appearance of DOM elements, while structural directives add, remove, or move elements in DOM.
Angular provides two structural directives,ngForandngIf.The ngFor directiverenders a template for each item in a collection (array), while thengIfhandles conditional rendering.
In this section, you will create a custom structural directive that functions like thengIfdirective. To do this, create acondition.directive.tsfile.
In thecondition.directive.tsfile, write this code:
This code block allows you to conditionally render elements by applying theconditiondirective to an element and passing a boolean value from the parent component.
In the constructor of theConditionDirectiveclass, you inject an instance ofTemplateRefandViewContainerRef. The TemplateRef represents the template associated with the directive, and the ViewContainerRef represents the container where the application renders the views.
The ConditionDirective class setter method uses an if else statement to check the arg parameter. The directive creates an embedded view using the provided template if the parameter is true. ThecreateEmbeddedViewmethod of the ViewContainerRef class creates and renders the view in the DOM.
If the parameter isfalse, the directive clears the view container using theclearmethod of the ViewContainerRef class. This removes any previously rendered views from the DOM.
After creating the directive, register it in your project by importing and declaring it in theapp.module.tsfile. After doing this, you can start using the directive in your templates.
Here is an example of how to use it in your templates:
Now You Can Create Custom Directives
Custom directives in Angular provide a powerful way to manipulate the DOM and add dynamic behavior to your templates. You have learned how to create and apply custom attributes and structural directives in your Angular applications. By understanding how to create and use custom directives, you can take full advantage of the capabilities of Angular.
