Angular directives are classes that add additional behavior to elements in your Angular applications. Using directives you can change the appearance or behavior of an element, change the DOM layout by adding and removing DOM elements.
Types of directives in Angular
There are three different types of Angular directives-
1. Components— Yes even components are directives only difference with other directives is that components are a directive with a template.
2. Attribute directives— Attribute directives are used to change the appearance or behavior of an element, component, or another directive.
3. Structural directives— Structural directives are used to change the DOM layout. These directives can add and remove DOM elements from the DOM structure.
1. Components
Components are a directive with a template that means you will create a TypeScript class that is decorated with a @Component decorator and an accompanying template (html) file.
Please refer Angular First App - Hello world Example to see an example of creating a component.
2. Attribute Directives
Attribute directives in Angular are used to modify the appearance or behavior of DOM elements.
Built-in attribute directives
Angular provides many built-in attribute directives, some of the frequently used are as follows-
1. NgClass— Using Angular ngClass directive you can dynamically add or remove CSS classes for a DOM element. Please refer Angular ngClass Directive With Examples to read more about NgClass directive.
2. NgStyle— Using Angular ngStyle directive you can set the CSS properties for the containing HTML element. Please refer Angular ngStyle Directive With Examples to read more about NgStyledirective.
3. NgModel— Used to add two-way data binding to an HTML form element. Please refer Angular Two-Way Data Binding With Examples to read more about it.
3. Structural Directives
Structural directives will change the structure of the DOM by removing or adding elements. Structural directives in Angular can be easily identified because these directives always start with an asterisk (*).
Built-in structural directives
Angular provides many built-in Structural directives, some of the frequently used are as follows-
1. NgIf— Angular ngIf directive is used to conditionally include or remove an element in the HTML document. Please refer Angular ngIf Directive With Examples to read more about it.
2. NgFor— Angular ngFor directive is the looping directive in Angular that repeats a node for each item in a list. Please refer Angular ngFor Directive With Examples to read more about it.
3. NgSwitch— It specifies an expression to match against and displays one element from among several possible elements, based on a switch condition. NgSwitch is a set of three directives: NgSwitch, NgSwitchCase, NgSwitchDefault. Please refer Angular ngSwitch Directive With Examples to read more about it.
Difference between Attribute Directive and Structural Directive
| Attribute Directive | Structural Directive |
|---|---|
| Attribute directives are named and used like a normal HTML attribute. Like normal attributes they are also used to changed the appearance of elements where they are placed. | Structural directives are easy to identify because their name always start with an asterisk (*). |
| Attribute directives modify the appearance or behavior of the DOM element but doesn’t change the DOM structure. | Structural directives change the DOM structure itself by adding or removing elements. |
That's all for this topic Directives in Angular. If you have any doubt or any suggestions to make please drop a comment. Thanks!
>>>Return to Angular Tutorial Page
Related Topics
You may also like-
No comments:
Post a Comment