Angular Directives

Learn via video courses
Topics Covered

Overview

Angular applications are built mostly with the available directives. A component directive, which is a basic building piece of the application, is often used.

What is Angular Directive?

Directives in angular are DOM elements (such as attributes) that instruct Angular to add a certain behavior to a behavior element. Angular itself has a variety of directives to assist you in your code. You may also write your code.

Component Directive

An angular component, or basic building block of an angular application, is a directive with an HTML template attached to it.

It is defined using the @Component decorator above the class, which includes metadata about the component.

The component's selector may now be used in any HTML template to include the component.

Structural Directives

Structural directives affect the layout of the DOM by adding and deleting DOM elements. There are a few built-in structural directives such as NgIf, NgForOf, NgSwitch etc.

Structural directives allow content to be introduced conditionally dependent on the outcome of an expression or to be repeated for each item in a data source.

Commonly Used Structural Directives

ngFor The ngFor directive is used to generate the same set of elements for each object in an array.

It may also be compared to the for loops used in any programming language to iterate a piece of code; similarly, we can use ngFor to iterate any UI block.

ngSwitch The ngSwitch directive is used to choose between multiple elements to include in the HTML document based on the result of an expression.

It may also be compared to switch-case statements, which are used to choose one of several possibilities. So, we can utilize ngSwitch in the HTML template to show the needed UI block.

ngIf

The ngIf directive is used to include an element if the expression evaluates to true. It is similar to if-else statements used in programming.

Only when the value of the expression is true will the block be displayed.

Attribute Directives

Attribute directives are classes that can change the behavior or appearance of the element to which they are applied.

There are a few built-in attribute directives available, and a custom directive can also be created using @Directive.

Commonly Used Attribute Directives

ngModel

The square and parenthesis surround the ngModel directive. It is also known as banana-in-the-box and helps with two-way binding. It binds to a form element such as input, select, selectarea, and so on.

Use the following syntax in the template:

ngClass Using this directive, we may modify the look of DOM components by adding or deleting classes.

ts file:

ngStyle

This is a directive for establishing an element's CSS styling. If you just want to set one style, you should generally use something like this code:

However, ngStyle is the way to go if you want to set multiple styles.

Building Custom Directives

We can also create custom directives in angular. In other words, the developer can design directives based on their requirements.

In the console, use the following command to create a directive:

The ts file will be generated, containing the following code:

@Directive specifies that the class below is a directive, and it also provides directive-related metadata.

And ElementRef will be used to update the DOM element directly.

Apply directive in the HTML template

It will change the element's background.

There are several use scenarios in which custom directives in angular can be included or can be useful in real-time.

Conclusion

There are three types of directives in angular:

  • Component Directive @Component decorator is used to define component directives. HTML template connected to it.

  • Structural Directive There are a few built-in structural directives that may change the DOM components at run time such as NgFor, NgIf etc.

  • Attribute Directive

    • Attribute directives are used to modify the look or behavior of DOM elements. There are a few built-in directives available ngModel ngClass ngStyle

    • Attribute directives can be customized to meet specific needs.