Difference between Component & Directive in Angular

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.