What are the differences between @Component and @Directive?

The components are used, when you want to create new elements in the DOM with their own HTML template.

The attribute directives are used, when you want to change or update the existing elements in the DOM.

We have 3 types of Directives in Angular -

1. Component

2. Attribute Directives

3. Structural Directives

Components - The component is a directive with their own templates and it is responsible for how a component should be processed, instantiated and used at run-time.

Structural Directives - The structural directive is a directive and it is responsible for change the DOM layout by adding, removing, and manipulating elements.

The most of the common built-in structural directives are NgIf, NgFor, and NgSwitch.

Attribute Directives - The Attribute directive is a directive and it is responsible for change the behavior of a specified element or component.

For more detail kindly refer the link....