Deciding between NgComponent and NgDirective

Question

Is there some rule of thumb to be followed while deciding to implement custom element as NgComponent or NgDirective?

What are the issues to keep in mind while deciding to choose either of them?

Answer 1

If you want to add functionality/behavior to existing tags/elements you use a directive (like ng-class or ng-hide). You can apply a directive to different tags.
To create a new element/tag you create a component (like accordion, carousel, modal, ...).
A component is a new custom element that can have a template that defines its shadow DOM content.

You can use a directive to dynamically add/remove html content too, but with a component you can create new elements that have a clear boundary between inside and outside.
A component has it's own scope that is not part of the application scope hierarchy.
You can't easily reach inside a components content.

Html generated from a directive is like any other html tags. You have transclusion with components (I think someone is working on components without shadow DOM and transclusion like in Angular.js but I don't know how far this is and how this will look like.)

You can use directives inside a component, and a component inside a component.