Algo deu errado. | Angular parte 1: produtividade e organização com framework SPA

Não está escurecendo ,quando passa o mouse.

Sorry, no photos

{{ photo.likes }} {{ photo.comments }}
```
  </div>
```

------------------------------------------------------------------------- import { NgModule } from '@angular/core'; import { DarkenOnHoverDirective } from './darken-on-hover.directive';

@NgModule({ declarations: [ DarkenOnHoverDirective ], exports: [ DarkenOnHoverDirective ] })

export class DarkenOnHoverModule { }

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

@Directive({ selector: '[apDarkenOnHover]' }) export class DarkenOnHoverDirective {

@Input() brightness = '70%';

constructor(
    private el: ElementRef,
    private render: Renderer2
) {}

@HostListener('mouseover')
darkenOn() {
    this.render.setStyle(this.el.nativeElement, 'filter', `brightness(${this.brightness})`);
}

@HostListener('mouseleave')
darkenOff() {
    this.render.setStyle(this.el.nativeElement, 'filter', 'brightness(100%)');
}

}

--------------------------------------------------------------------------

<ap-photos [photos]= "photos | filterByDescription:filter">

<ap-load-button (click)="load()" [hasMore]="hasMore">

export class DarkenOnHoverModule { }

}

{{ title }}