Modify The DOM Behaviour In Angular: Angular Directives

Angular is a client-side web app creation technology. There are multiple ways to manipulate DOM behavior in Angular, but today we are going to learn Angular, one of the most asked topics in an interview Angular Directives.

Angular Directives

One of the hottest topics in angular is angular directives.

Angular directives are used to manipulate DOM( Document Object Model) or add new behavior.

In Simple words, directives are used to manipulate the DOM, for example adding/removing the element from DOM or changing the appearance of the DOM elements.

In Angular, there are 3 types of Directives.

1. Attribute Directives
2. Structural Directives
3. Custom Directives

Let’s explore all of them One by One.

You also heard about Built-in Directives. Let me explain, All the predefined Directives come in Built-in Directives.

Structural Directives:

Structural directives are used for HTML layout. They are basically used to shape or reshape the DOM’s structure, typically by adding, removing, and manipulating the host elements to which they are attached.

Structural Directives or Built-in Structural Directives

1. NgIf Conditionally adds or remove subviews from the template.
2. NgFor Repeat an element for each item in a list.
3. NgSwitch A set of directives that switch among alternative views.

Attribute Directives:

Attribute directives listen to and manipulate the behavior of DOM elements / HTML elements, attributes, properties, and components.

1. NgStyle Adds and removes a set of inline CSS.
2. NgClass Adds and removes a set of CSS classes.
3. NgModel Adds two-way data binding to an HTML form element.

Custom Directives:

Angular gives us the functionality to create custom directives & manipulate DOM.

To create a custom directive run command

ng generate directive <directive-name>

//short form of this command

ng g d <directive-name>

It will create two new files with a directive name.

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

@Directive({
  selector: '[<directive-name>]'
})
export class Directive-Name {

  constructor() { }

}

Now you can start your work and write code to manipulate DOM.

In this blog we are going to create a custom number-only directive by this directive we will add restrictions on input fields that accept only numbers.

Let’s start now:

Step 1:

Run command

ng g d number-only

Step 2

Now central part starts, open the directive file and start writing your logic.

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

@Directive({

  selector: '[appNumberOnly]'

})

export class NumberOnlyDirective {

  constructor() { }

}

Import ElementRef & Render2 to manipulate input field behavior.

When I start learning and creating this directive, I was want to use angular for dom manipulation or change behavior so I dig into the deep and find out Render2 provides us a nice functionality. The Renderer2 class allows manipulating elements of our application without having to touch the DOM directly.

And I believe by the name of ElementRef you already understand why we are using ElementRef. It worked around the native element & allow to work around DOM by providing the nativeElement object which exposes all the methods and properties of the native elements.

 constructor (private _elRef: ElementRef, private _renderer: Renderer2) { }

Now use these 2 and add restrictions.

 ngOnInit() {

     this._renderer.setAttribute(
         
                       this._elRef.nativeElement, 'onkeypress', 'return 

                               (event.charCode >= 48 && event.charCode <= 57) 

                                        || event.charCode == 0');

  }

In the above code, we are using charCode to add restrictions.

Now let’s use this directive in the input field and check it.

Let’s Recap:

In this blog, we learn

• Types of Angular Directives
• How we can create custom Directives.
• Basic understanding of Render2 & ElementRef.

Although altering a DOM is not a novel activity in the realm of web development, using custom directives to do so gives us access to a new method. Additionally, you can write your own unique directive.