In this article we will learn about in details of Angular Directives. Angular Directives are the most important features of Angular. Here we discuss about types of directives and why the directives are essential part of angular. We also look at the few of the most commonly used Angular directives. Please read my previous article of angular Angular Template Driven Forms Validation.
What is Angular Directive?
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.
A directive modifies the DOM by changing the appearance, behavior, or layout of DOM elements. Directives just like Component are one of the core building blocks in the Angular framework to build applications.
Why Directives Required?
- Reusability — In an Angular application, the directive is a self-sufficient part of the UI. As a developer, we can reuse the directive across the different parts of the application. This is very much useful in any large-scale applications where multiple systems need the same functional elements like search box, date control, etc.
- Readability — Directive provides much more readability for the developers to understand the production functionality and data flow.
- Maintainability — One of the main use of directive in any application is the maintainability. We can easily decouple the directive from the application and replace the old one with a new one directives.
Types of Directives in Angular
The Directives are classified into three types based on their behavior.
- Component Directive
- Structural directives
- Attribute directives
Component Directive
The Component directive is the 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.
For example, if you want to create a component with the name student then it should be app.component.ts.
- Component directive, is nothing but a simple class which is decorated with the @component decorator.
- In Angular , a normal typescript class will become a Component class once it has been decorated with @component decorator
- It is mainly used to specify the html templates.
- It is most commonly used directive in angular project
- If you need more info on angular component, then kindly refer here: need to add
@component decorator provides additional metadata that determines how the component should be processed, instantiated and used at runtime.
import { Component } from "@angular/core";
//decorator
@Component({
selector: 'my-App',
template: '<h1>{{name}}</h1>'
})
export class AppComponent {
name: string = "Angular Component Decorator Example"
} Append the component is HTML file like below,
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/src/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<!--Here is the selector mapped-->
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html> Structural Directive
Structural directives are mainly used to change the design pattern of the UI DOM elements. In HTML, these directives can be used as a template tag. Using this type of directives, we can change the structure of any DOM elements and can redesign or redecorate those DOM elements.
In-Build Structural Directives are, we will discuss it on our upcoming articles.
- ngIf
- ngFor
- ngSwitch
Attribute Directive
Attribute directives are mainly used for changing the appearance or behavior of a component or a native DOM element. Attribute directives actually modify the appearance or behavior of an element. These directives actually act as a simple HTML attribute for any HTML tag.
In-Build Attributes Directives are
- ngModel directive is used the achieve the two-way data binding. We have covered ngModel directive in Data Binding in Angular Tutorial
- ngClass directive changes the class attribute that is bound to the component or element it’s attached to.
- ngStyle is mainly used to modify or change the element’s style attribute. This attribute directive is quite similar to using style metadata in the component class.
Conclusion
Here we discussed about in details of Angular Directives. Angular Directives are the most important features of Angular. Here we discuss about types of directives and why the directives are essential part of angular.
Leave behind your valuable queries and suggestions in the comment section below. Also, if you think this article helps you, do not forget to share this with your developer community. Happy Coding 🙂
Related Articles
- Create a responsive sidebar with Angular Material- Angular 18 Example Series
- How to Deploy Angular 17/18 App in GitHub Pages
- How to convert Text To Speech With Azure Cognitive Services using Angular and .Net Core
- Angular Interceptors- The Complete Guide
- Upload Download and Delete files in Azure Blob Storage using ASP.NET Core and Angular
- Introduction to Azure Cosmos DB
- How to create Cosmos DB in Azure
- Why ReactJS is used over plain JavaScript
- Introduction to GraphQL
- Creating a Sample ReactJs Application using VS Code
Jayant Tripathy
Coder, Blogger, YouTuberA passionate developer keep focus on learning and working on new technology.