Introducing directives
Angular directives are HTML attributes that extend the behavior or the appearance of a standard HTML element. When we apply a directive to an HTML element or even an Angular component, we can add custom behavior or alter its appearance. There are three types of directives:
- Components: Components are directives that contain an associated HTML template.
- Structural directives: They add or remove elements from the DOM such as
*ngIf,*ngFor, and[ngSwitch]. - Attribute directives: They modify the appearance of a DOM element or define a custom behavior. We met attribute directives in class and style bindings in the previous chapter.
If a directive has a template attached, then it becomes a component. In other words, components are Angular directives with a view. This rule is handy when deciding whether to create a component or a directive for our needs. If we need a template, we create a component; otherwise, we make it a directive.
