Directive vs Component in Angular

Question

What is the difference between  Component and  Directive in Angular  Both of them seem to do the same task and have the same attributes   What are the use cases and when to prefer one over another

User · Answer

A component is a directive-with-a-template and the  Component decorator is actually a  Directive decorator extended with template-oriented features

User · Answer

If you refer the official angular docs  https   angular io guide attribute-directives   There are three kinds of directives in Angular    Components   directives with a template  Structural directives   change the DOM layout by adding and removing DOM elements  e g  ngIf Attribute directives   change the appearance or behavior of an element  component  or another directive  e g  ngClass     As the Application grows we find difficulty in maintaining all these codes  For reusability purpose  we separate our logic in smart components and dumb components and we use directives  structural or attribute  to make changes in the DOM

User · Answer

Change detection  Only  Component can be a node in the change detection tree  This means that you cannot set ChangeDetectionStrategy OnPush in a  Directive  Despite this fact  a Directive can have  Input and  Output properties and you can inject and manipulate host component s ChangeDetectorRef from it  So use Components when you need a granular control over your change detection tree

User · Answer

A  Component requires a view whereas a  Directive does not   Directives  I liken a  Directive to an Angular 1 0 directive with the option restrict   A   Directives aren t limited to attribute usage   Directives add behaviour to an existing DOM element or an existing component instance  One example use case for a directive would be to log a click on an element   import  Directive  from   angular core     Directive       selector    logOnClick        hostListeners             click    onClick               class LogOnClick       constructor          onClick     console log  Element clicked           Which would be used like so    lt button logOnClick gt I log when clicked  lt  button gt    Components  A component  rather than adding modifying behaviour  actually creates its own view  hierarchy of DOM elements  with attached behaviour  An example use case for this might be a contact card component   import  Component  View  from   angular core     Component     selector   contact-card     template         lt div gt         lt h1 gt   name   lt  h1 gt         lt p gt   city   lt  p gt       lt  div gt         class ContactCard      Input   name  string    Input   city  string   constructor          Which would be used like so    lt contact-card  name    foo    city    bar   gt  lt  contact-card gt    ContactCard is a reusable UI component that we could use anywhere in our application  even within other components  These basically make up the UI building blocks of our applications   In summary  Write a component when you want to create a reusable set of DOM elements of UI with custom behaviour  Write a directive when you want to write reusable behaviour to supplement existing DOM elements    Sources     Directive documentation  Component documentation Helpful blog post

User · Answer

Components   To register a component we use  Component meta-data annotation  Component is a directive which uses shadow DOM to create encapsulated visual behavior called components   Components are typically used to create UI widgets  Component is used to break up the application into smaller components  Only one component can be present per DOM element   View decorator or templateurl template are mandatory in the component    Directive   To register directives we use  Directive meta-data annotation  Directive is used to add behavior to an existing DOM element   Directive is use to design re-usable components  Many directives can be used per DOM element  Directive doesn t use View    Sources   http   www codeandyou com 2016 01 difference-between-component-and-directive-in-Angular2 html

User · Answer

In Angular 2 and above     everything is a component     Components are   the main way we build and specify elements and logic on the page    through both custom elements and attributes that add functionality to   our existing components    http   learnangular2 com components   But what directives do then in Angular2        Attribute directives attach behaviour to elements       There are three kinds of directives in Angular          Components   directives with a template    Structural directives   change   the DOM layout by adding and removing DOM elements     Attribute directives   change the appearance or behaviour of an element    component  or another directive       https   angular io docs ts latest guide attribute-directives html  So what s happening in Angular2 and above is Directives are attributes which add functionalities to elements and components   Look at the sample below from Angular io    import   Directive  ElementRef  Input   from   angular core     Directive   selector    myHighlight      export class HighlightDirective       constructor el  ElementRef           el nativeElement style backgroundColor    yellow             So what it does  it will extends you components and HTML elements with adding yellow background and you can use it as below    lt p myHighlight gt Highlight me  lt  p gt    But components will create full elements with all functionalities like below   import   Component   from   angular core     Component     selector   my-component     template         lt div gt Hello my name is   name            lt button  click   sayMyName    gt Say my name lt  button gt       lt  div gt          export class MyComponent     name  string    constructor         this name    Alireza        sayMyName         console log  My name is   this name          and you can use it as below    lt my-component gt  lt  my-component gt    When we use the  tag in the HTML  this component will be created and the constructor get called and rendered

User · Answer

In a programming context  directives provide guidance to the compiler to alter how it would otherwise process input  i e change some behaviour         Directives allow you to attach behavior to elements in the DOM       directives are split into the 3 categories     Attribute    Structural    Component   Yes  in Angular 2  Components are a type of Directive  According to the Doc         Angular components are a subset of directives  Unlike directives  components always have a template and only one component can be instantiated per an element in a template       Angular 2 Components are an implementation of the Web Component concept  Web Components consists of several separate technologies  You can think of Web Components as reusable user interface widgets that are created using open Web technology    So in summary directives The mechanism by which we attach behavior to elements in the DOM  consisting of Structural  Attribute and Component types  Components are the specific type of directive that allows us to utilize web component functionality AKA reusability - encapsulated  reusable elements available throughout our application

User · Answer

Components  Components are the most basic UI building block of an Angular app  An Angular app contains a tree of Angular components  Our application in Angular is built on a component tree  Every component should have its template  styling  life cycle  selector  etc  So  every component has its structure You can treat them as an apart standalone small web application with own template and logic and a possibility to communicate and be used together with other components   Sample  ts file for Component   import   Component   from   angular core     Component          component attributes     selector   app-training       templateUrl     app-training component html       styleUrls      app-training component less       export class AppTrainingComponent       title    my-app-training       and its   app component html template view   Hello   title     Then you can render AppTrainingComponent template with its logic in other components  after adding it into module    lt div gt      lt app-training gt  lt  app-training gt   lt  div gt    and the result will be   lt div gt     my-app-training  lt  div gt    as AppTrainingComponent was rendered here  See more about Components  Directives  Directive changes the appearance or behavior of an existing DOM element  For example  ngStyle  is a directive  Directives can extend components  can be used inside them  but they don t build a whole application  Let s say they just support components  They don t have its own template  but of course  you can manipulate template with them     Sample directive    Directive     selector    appHighlight      export class HighlightDirective      constructor private el  ElementRef          Input  appHighlight   highlightColor  string      HostListener  mouseenter   onMouseEnter         this highlight this highlightColor     red           private highlight color  string        this el nativeElement style backgroundColor   color          And its usage    lt p  appHighlight   color   otherPar   someValue  gt Highlight me  lt  p gt    See more about directives

[angular] @Directive vs @Component in Angular

Examples related to angular