A directive is a class used to add additional behavior to elements. They play a significant role when it comes to displaying templates or HTML pages in Angular projects.
Types of Directives
In Angular, there are four types of directives available: • Component directives • Structural directives • Attribute directives • Custom directives
The most-used directives in Angular, component directives specify the HTML templates for the DOM layout using the @component decorator. This decorator is used to determine how the component should be instantiated, processed, and used at a runtime.
A structural directive, which is prefixed with an asterisk (*), is used to add or remove an HTML element itself in the DOM layout. *NgIf, *NgFor, and *NgSwitch are its built-in types.
Attribute directives are helpful if you want to modify an existing HTML element's behavior or style without encapsulating it in a new component. The most popular built-in attribute directives are NgClass and NgStyle.
Custom directives use the @directive decorator to customize the appearance of HTML elements such as text color, background color, and font size. We can create custom attribute and structural directives.