O hover não funcionou.

darken-on-hover.directive

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

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

    @Input() brightness = '70%';


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

    @HostListener('mouseover')
    darkenOn() {
        this.render.setElementStyle(this.el.nativeElement, 'filter', `brightness(${this.brightness})`);
    }
    @HostListener('mouseleave')
    darkenOff() {
        this.render.setElementStyle(this.el.nativeElement, 'filter', 'brightness(70%)');
    }
}

photos.component.html

<p class="text-center text-muted" *ngIf="!photos.length">
    Sorry, no photos
</p>

<ol class="list-unstyled">
  <li *ngFor="let cols of rows" class="row no-gutters">
      <div *ngFor="let photo of cols" class="col-4" apDarkenOnHover brightness="20%">
            <ap-card>
                <ap-photo
                    [url]="photo.url"
                    [description]="photo.description">
                </ap-photo>
                <div class="text-center p-1">
                    <i aria-hidden="true" class="fa fa-heart-o fa-1x mr-2"></i>{{ photo.likes }}
                    <i aria-hidden="true" class="fa fa-comment-o fa-1x mr-2 ml-2"></i>{{ photo.comments }}
                </div>
            </ap-card>
        </div>
  </li>
</ol>

darken-on-hover.module

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

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

}

photo-list.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PhotoListComponent } from './photo-list.component';
import { PhotosComponent } from './photos/photos.component';
import { LoadButtonComponent } from './load-button/load-button.component';
import { FilterByDescription } from './filter-by-description.pipe';
import { PhotoModule } from '../photo/photo.module';
import { CardModule } from 'src/app/shared/components/cards/card.module';
import { SearchComponent } from './search/search.component';
import { DarkenOnHoverModule } from 'src/app/shared/directives/darken-on-hover/darken-on-hover.module';

@NgModule({
    declarations: [
        PhotoListComponent,
        PhotosComponent,
        LoadButtonComponent,
        FilterByDescription,
        SearchComponent
    ],
    imports: [
        CommonModule,
        PhotoModule,
        CardModule,
        DarkenOnHoverModule
    ]
})
export class PhotoListModule {}