A component is a class with the @Component decorator whose job is to create a view with a specific behavior, which will be added to the DOM elements hierarchy of the Angular app GUI.๐จ
A directive is a class with the @Directive decorator. It does not has view (no HTML template), and only add a specific behavior to the DOM or to a component instance (in order to reuse it in multiple locations).๐ง
So you create a component when you want to add an element to the GUI DOM.
And you do a directive when you want to define a reusable behavior, to strengthen the already existing elements of your DOM.
๐๐จ ๐ฌ๐ฎ๐ฆ-๐ฎ๐ฉ:
๐๐จ๐ฆ๐ฉ๐จ๐ง๐๐ง๐ญ = ๐๐ข๐๐ฐ + ๐๐๐ก๐๐ฏ๐ข๐จ๐ซ
๐๐ข๐ซ๐๐๐ญ๐ข๐ฏ๐ = ๐๐๐ฎ๐ฌ๐๐๐ฅ๐ ๐๐๐ก๐๐ฏ๐ข๐จ๐ซ