HostBinding and HostListener what do they do and what are they for

Question

In my meanderings around the world wide interweb  and now especially the angular io style docs  I find many references to  HostBinding and  HostListener  It seems they are quite fundamental  but unfortunately the documentation for them at the moment is a little sketchy   Can anyone please explain what they are  how they work and give an example of their usage

User · Answer

Summary    HostBinding  This decorator binds a class property to a property of the host element   HostListener  This decorator binds a class method to an event of the host element   Example  import   Component  HostListener  HostBinding   from   angular core     Component     selector   app-root     template    lt p gt This is nice text lt p gt       export class AppComponent        HostBinding  style color   color       HostListener  click     onclick         this color     blue           In the above example the following occurs   An event listener is added to the click event which will be fired when a click event occurs anywhere within the component The color property in our AppComponent class is bound to the style color property on the component  So whenever the color property is updated so will the style color property of our component The result will be that whenever someone clicks on the component the color will be updated   Usage in  Directive  Although it can be used on component these decorators are often used in a attribute directives  When used in an  Directive the host changes the element on which the directive is placed  For example take a look at this component template   lt p p Dir gt some paragraph lt  p gt   Here p Dir is a directive on the  lt p gt  element  When  HostBinding or  HostListener is used within the directive class the host will now refer to the  lt p gt

User · Answer

Here is a basic hover example   Component s template property    Template   lt  -- attention  we have the c highlight class -- gt   lt  -- c highlight is the selector property value of the directive -- gt    lt p class  c highlight  gt      Some text   lt  p gt    And our directive  import  Component HostListener Directive HostBinding  from   angular core     Directive          this directive will work only if the DOM el has the c highlight class     selector    c highlight      export class HostDirective         we could pass lots of thing to the HostBinding function        like class valid or attr required etc      HostBinding  style backgroundColor   c colorrr    red        HostListener  mouseenter   c onEnterrr        this c colorrr   blue            HostListener  mouseleave   c onLeaveee        this c colorrr    yellow

User · Answer

DECORATORS  to dynamically change the behaviour of DOM elements  HostBinding  Dynamic binding custom logic to Host element   HostBinding  class active    activeClass   false    HostListen  To Listen to events on Host element  HostListener  click    activeFunction        this activeClass    this activeClass      Host Element      lt button type  button  class  quot btn btn-primary btn-sm quot  appHost gt Host lt  button gt

User · Answer

Have you checked these official docs   HostListener - Declares a host listener  Angular will invoke the decorated method when the host element emits the specified event    HostListener - will listen to the event emitted by the host element that s declared with  HostListener   HostBinding - Declares a host property binding  Angular automatically checks host property bindings during change detection  If a binding changes  it will update the host element of the directive    HostBinding - will bind the property to the host element  If a binding changes  HostBinding will update the host element     NOTE  Both links have been removed recently  The  HostBinding-HostListening  portion of the style guide may be a useful alternative until the links return       Here s a simple code example to help picture what this means   DEMO   Here s the demo live in plunker -  A simple example about  HostListener  amp   HostBinding    This example binds a role property -- declared with  HostBinding -- to the host s element    Recall that role is an attribute  since we re using attr role   lt p myDir gt  becomes  lt p mydir    role  admin  gt  when you view it in developer tools   It then listens to the onClick event declared with  HostListener  attached to the component s host element  changing role with each click    The change when the  lt p myDir gt  is clicked is that its opening tag changes from  lt p mydir    role  admin  gt  to  lt p mydir    role  guest  gt  and back     directives ts  import  Component HostListener Directive HostBinding Input  from   angular core     Directive  selector    myDir     export class HostDirective      HostBinding  attr role   role    admin       HostListener  click   onClick         this role  this role      admin     guest     admin           AppComponent ts  import   Component ElementRef ViewChild   from   angular core   import  HostDirective  from    directives     Component   selector   my-app   template         lt p myDir gt Host Element       lt br gt  lt br gt       We have a  HostListener  listening to this host s  lt b gt click event lt  b gt  declared with  HostListener       lt br gt  lt br gt       And we have a  HostBinding  binding  lt b gt the role property lt  b gt  to host element declared with  HostBinding      and checking host s property binding updates       If any property change is found I will update it     lt  p gt      lt div gt View this change in the DOM of the host element by opening developer tools      clicking the host element in the UI        The role attribute s changes will be visible in the DOM  lt  div gt            directives   HostDirective     export class AppComponent

User · Answer

Theory with less Jargons   Hostlistnening deals basically with the host element say  a button  listening to an action by a user and performing a certain function say alert  Ahoy    while  Hostbinding is the other way round  Here we listen to the changes that occurred on that button internally  Say when it was clicked what happened to the class  and we use that change to do something else  say emit a particular color   Example  Think of the scenario that you would like to make a favorite icon on a component  now you know that you would have to know whether the item has been Favorited  with its class changed   we need a way to determine this  That is exactly where  Hostbinding comes in   And where there is the need to know what action actually was performed by the user that is where  Hostlistening comes in

User · Answer

Another nice thing about  HostBinding is that you can combine it with  Input if your binding relies directly on an input  eg    HostBinding  class fixed-thing    Input   fixed  boolean

User · Answer

One thing that adds confusion to this subject is the idea of decorators is not made very clear  and when we consider something like      HostBinding  attr something    get something          return this somethingElse        It works  because it is a get accessor  You couldn t use a function equivalent    HostBinding  attr something    something          return this somethingElse        Otherwise  the benefit of using  HostBinding is it assures change detection is run when the bound value changes

User · Answer

A quick tip that helps me remember what they do -   HostBinding  value   myValue  is exactly the same as  value   myValue   And  HostListener  click   myClick      is exactly the same as  click   myClick       HostBinding and HostListener are written in directives  and the other ones       and      are written inside templates  of components

User · Answer

begginers  Component     selector   custom-comp     template     lt div class  quot my-class quot   click   quot onClick   quot  gt CLICK ME lt  div gt        export class CustomComp     onClick        gt  console log  click event          pros  Component     selector   custom-comp     template    CLICK ME       export class CustomComp      HostBinding  class   class    my-class      HostListener  click   onClick        gt  console log  click event          experts  Component     selector   custom-comp     template    CLICK ME      host        class   my-class         click     onClick             export class CustomComp     ------------------------------------------------ The 1st way will result in   lt custom-comp gt      lt div class  quot my-class quot   click   quot onClick   quot  gt        CLICK ME     lt div gt   lt  custom-comp gt   The last 2 ways will result in   lt custom-comp class  quot my-class quot   click   quot onClick   quot  gt     CLICK ME  lt  custom-comp gt

[angular] @HostBinding and @HostListener: what do they do and what are they for?

Summary:

Example:

Usage in `@Directive`:

Examples related to angular

Examples related to angular-services