Differences between structural and attribute directives
Structural Directives | Attribute Directives |
|---|---|
They alter the structure of the DOM by adding , removing or manipulating elements. | They change the behaviour or appearance of an element, component, or other directive |
Prefixed with an asterisk (*) in the template. eg: *ngIf, *ngFor | Used as attributes in the template. eg : `[ngClass]`, `[ngStyle]` |
Used for conditionally displaying elements or iterating over a collection. | Used for applying dynamic styles, modifying existing behaviour |
Generally, only one structural directive can be applied to a single element at a time. | We can combine multiple attribute directives on a single element. |
Ex : *ngIf, *ngFor, *ngSwitch | Ex : [ngClass] , [ngStyle] , [ngModel] |
Difference between structural and attribute directives
Structural directives manipulate the DOM layout by adding, removing, or replacing elements, while attribute directives modify the appearance or behavior of elements without affecting their structure. Directives in Angular are nothing but the classes that allow us to add and modify the behavior of elements. Using directives in angular we can modify the DOM (Document Object Module) styles, handle user functionality, and much more.
Table of Content
- Structural Directives
- Attribute Directives
- Differences between structural and attribute directives
There are mainly two types of directives Structural Directives and Attribute Directives. In this article let us learn more about these directives
Contact Us