Difference between Component & Directive in Angular:
Component:
- Components can be created using @Component annotation.
- <app-header></app-header>, here app-header is the component.
- Components helps to split the application into smaller components.
- Only one component can be used per DOM element. <app-header app-footer></app-header app-footer> can’t do like this and all.
Directive:
- Directive can be created using @Directive annotation.
- <button highLightMe>I log when clicked!</button>, here highLightMe is the directive.
- Directives helps to design re-usable components. [highLightMe can be used in different tags to highlight the text present inside the tags].
- Multiple directive can be used per DOM element. <p highLightMe boldMe></p> two different directive used for the same DOM element tag p.