import { Directive , HostListener } from '@angular/core' ; param input export function nameConvention ( input ) { return input . toLowerCase ( ) . replace ( / /g , '-' ) ; } @ Directive ( { selector : '[name-guideline]' } ) export class NameDirective { param $event @ HostListener ( 'input' , [ '$event' ] ) onInputChange ( $event ) { $event . target . value = nameConvention ( $event . target . value ) ; } }