Angular Directives
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.
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
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.
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
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.
Turn Learning into Career Growth
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.
-