Angular, Custom directive


Simple example of Custom directive. Everything what you need will be generated after executing this commands ng new hello-word to create new app and ng g d logger to create new directive. After that, what you have to do, is adjust few files. Of course more you can find in Angular documentation, here we have only my notes. One more thing, if you don’t like to install node mess on your local computer you can use my or similar docker image
https://hub.docker.com/r/szalek/angular-cli/

New app and directive

ng new hello-word
ng g d logger

logger.directive.ts

import {Directive, HostListener} from '@angular/core';

@Directive({
  selector: '[appLogger]'
})
export class LoggerDirective {

  constructor() { }

  @HostListener('click')
  onClick() {
    console.log('Click')
  }

  @HostListener('focus')
  onFocus() {
    console.log('Focus')
  }

  @HostListener('blur')
  onBlur() {
    console.log('Blur')
  }
}

How to use

<input text="text" appLogger/>