What is Angular Directives?. The Complete Angular Developer Course 2023 [Videos].

In this article, I am going to give you an overview of Angular Directives. Please read our previous article where we discussed Different Types of Bindings in Angular Application with Examples. At the end of this article, you will understand the following important pointers which are commonly asked in angular interviews.

1. What are Directives?
2. Why we need Directives in Angular Application?
3. What are the different types of directives available in the Angular Framework?

What are Angular Directives?

The Angular Directives are the elements which are basically used to change the behavior or appearance or layout of the DOM (Document Object Model) element. In other words, we can say that the directives are basically used to extend the power of HTML attributes and to change the appearance or behavior of a DOM element.

Types of Directives in Angular:

The Directives are classified into three types based on their behavior. Please have a look at the following image for a better understanding of the directives classification.

As you can see in the above image, the directives in angular are classified into three types. They are as follows:

1. Structural Directive
2. Attribute Directive
3. Component Directives

Let us discuss each of these directives in detail.

Structural Directives:

The Structural Directives are responsible for the HTML layout. That means, they will shape or reshape the HTML view by simply adding or removing the elements from the DOM. These directives are basically used to handle how the component or the element should render in a template.

In Angular, there are three structural directives are available. They are as follows:

1. NgFor (*ngFor)
2. NgIf (*ngIf)
3. NgSwitch (*ngSwitch)

We will discuss each of each type in detail from our next Video.

Attribute Directives:

Attribute Directives are basically used to modify the behavior or appearance of the DOM element or the Component. In Angular, there are two in-built attribute directives available. They are as follows:

1. NgStyle: This NgStyle Attribute Directive is basically used to modify the element appearance or behavior.
2. NgClass: This NgClass Attribute Directive is basically used to change the class attribute of the element in the DOM or in the Component to which it has been attached.

We will discuss these two built-in attributes in detail in our upcoming Videos.

Component Directives:

We have already discussed Component in our previous Videos. The Component is also a type of directive in angular with its own template, styles, and logic needed for the view. The Component Directive is the most widely used directive in the angular application and you cannot create an angular application without a component.

A component directive requires a view along with its attached behavior and this type of directive adds DOM Elements. The Component Directive is a class with @Component decorator function.

The naming convention for components is name.component.ts. For example, if you want to create a component with the name student then it should be student.component.ts.