There are 3 types of directives in Angular 2.
1. Components Directives - directives with a template
2. Structural Directives - change the DOM layout by adding and removing DOM elements.
3. Attribute Directives - change the appearance or behavior of an element, component, or other directive.
Stayed Informed – KendoUI for Angular 2 Grids
A component is a directive with a template and the @Component decorator is actually a @Directive decorator extended with template oriented features.
1. To register a component, we use @Component meta-data annotation.
2. The directives are used to add behavior to existing DOM elements.
3. The directives are used to design a reusable component.
4. Only one component can be present per DOM element.
5. Multiple directives are used per DOM element.
6. The directive does not have @View etc.
What are structural directives?
The Structural directives are responsible for HTML layout and It is using Angular 2 for reshape the DOM's structure and also removing, or manipulating elements.
What are attribute directives?
Attribute directives are used to change the behavior, appearance or look of an element on a user input or via data from the service.
For example as,