title: Why are @HostBinding, @HostListener, and @Input not working in my Angular app?
body: <p>I'm having trouble incorporating @HostBinding, @HostListener, and @Input.  It's supposed to interchange between images when you hover over and hover out of the image area.  It seems like it should work, but it doesn't.  Any help is appreciated.</p>
  
  <p>This is from the free and highly rated book 'Angular 4: From Theory to Practice' which you can get off Amazon.  It is the 'end of chapter' activity for the chapter on 'Custom Directives'.</p>
  
  <p>Here's my plunker link for where I'm currently at in the problem:  <a href="http://plnkr.co/edit/MO2m8F4A3PLIIzMIbMD5?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/MO2m8F4A3PLIIzMIbMD5?p=preview</a></p>
  
  <p>and here is the code here as well:</p>
  
  <pre><code>import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
  import {
      Component,
      Directive,
      Renderer,
      HostListener,
      HostBinding,
      ElementRef,
      NgModule,
      Input,
      Output,
      EventEmitter
  } from '@angular/core';
  import {BrowserModule} from '@angular/platform-browser';
  
  
  @Directive({
    selector: "[ccRollover]"
  })
  class RolloverImageDirective {
    constructor(private el: ElementRef, private renderer: Renderer){
  
    }
    @HostBinding('src') private image: string;
  
    @Input('ccRollover') images: Object = {
      initial: 'https://unsplash.it/200/300?image=201',
      over: 'https://unsplash.it/200/300?image=202'
    };
    @HostListener('mouseover') onMouseOver() {
      this.image = this.images.over;
    }
    @HostListener('mouseout') onMouseOut(){
      this.image = this.images.initial;
    }
    //TODO: Flesh out this directive
    //TODO: HINT - Use ngOnChanges()
  }
  
  @Component({
    selector: 'app',
    template: `
  &lt;img ccRollover[images]="{
    initial:'https://unsplash.it/200/300?image=201',
    over:'https://unsplash.it/200/300?image=202'
  }"/&gt; 
  `
  })
  class AppComponent {
  }
  
  @NgModule({
    imports: [BrowserModule],
    declarations: [
      AppComponent,
      RolloverImageDirective
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {
  }
  
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>