$30 off During Our Annual Pro Sale. View Details »

ngIndia - HostBinding() and HostListener()

Nishu Goel
February 23, 2019

ngIndia - HostBinding() and HostListener()

Directives in Angular help us to attach a specified behavior to the DOM. We can also create custom attribute directives and apply them on DOM elements. We can also capture the events and properties of the host element using HostBinding() and HostListener().

Nishu Goel

February 23, 2019
Tweet

More Decks by Nishu Goel

Other Decks in Programming

Transcript

  1. ngIndia

  2. Nishu Goel Software Engineer, IBM | Udemy Author |Community Developer

    @DcoustaWilson
  3. @HostBinding() & @HostListener() @DcoustaWilson

  4. ng-India www.ng-ind.com @DcoustaWilson

  5. Check out: https://medium.com/@nishu0505/pre-requisites-for-my-talk-at-ngindia-f2b9adbe3d2e @DcoustaWilson

  6. Directives? Really? Then what are components? The most basic building

    blocks of Angular @DcoustaWilson
  7. Directives Component Structural Attribute (Self-contained directives) Directives with a template

    To change layout *ngIf *ngFor Change appearance or behavior @DcoustaWilson
  8. CUSTOM ATTRIBUTE DIRECTIVE ng generate directive directive-name @DcoustaWilson

  9. Steps to create Custom Attribute directives • Create Directive from

    the CLI • Inject services ElementRef and Renderer • Register inside the module • Use your Directives @DcoustaWilson
  10. Host Element? @DcoustaWilson

  11. @HostListener() @DcoustaWilson

  12. @HostBinding() @DcoustaWilson

  13. Thank You! PLAY AROUND WITH HOST BINDING & HOST LISTENER

    here on Stackblitz: https://stackblitz.com/edit/ngindia