import { Component , OnInit , Host , Optional , ViewEncapsulation } from '@angular/core' ; import { LoggerService } from '../logger-service' ; import { MySpecialLoggerService } from '../my-special-logger.service' ; import { AnotherLoggerService } from '../another-logger.service' ; import { LogLevel } from '../log-level.enum' ; import { LOG_LEVEL_TOKEN } from '../app.tokens' ; @ Component ( { selector : 'mpl-mouse-track-zone' , templateUrl : './mouse-track-zone.component.html' , styleUrls : [ './mouse-track-zone.component.css' ] , encapsulation : ViewEncapsulation . Native } ) export class MouseTrackZoneComponent implements OnInit { logger : LoggerService ; constructor ( @ Host ( ) @ Optional ( ) mySpecialLogger , anotherLogger ) { this . logger = mySpecialLogger ? mySpecialLogger : anotherLogger ; } ngOnInit ( ) { } captureMousePos ( $event ) { this . logger . debug ( 'click event occured' ) ; const pos = [ $event . clientX , $event . clientY ] ; this . logger . info ( `x:${ pos [ 0 ] } y:${ pos [ 1 ] }` ) ; } }