component and directive difference code example

Example: angular directive vs component

Components ARE Directives. 
They are an extenison of directives with their own template and features.
They are used for different things. Main differences:

Components:
- Have their own shadow DOM (an encapsulated template).
- Only one component can be present per DOM element.
- Used represent the core behaviour of DOM element.

Directives:
- Used to add behavior to an existing DOM element.
- Used to design re-usable components.
- Many directives can be used per DOM element.