Renderer não deu certo!!!

Amanda, você deve usar o Renderer2 e usar o código dessa forma:

this.render.setStyle(...o  código da aula);

Continua não escurecendo, quando passa o mouse na imagem.

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%)');
}

}

Oi Amanda. Dá uma revisada no código, vê se você não esqueceu de exportar em algum lugar ou se você chamou a diretiva corretamente no componente das cartas.

<div class="col-4" *ngFor="let photo of cols" appDarkenOnHover>
      <app-card [title]="photo.description">
        <app-photo
          [url]="photo.url"
          [description]="photo.description"></app-photo>

        <div class="text-center">
          <i aria-hidden="true" class="fa fa-heart-o fa-1x mr-2">{{ photo.likes }}</i>
          <i aria-hidden="true" class="fa fa-comment-o fa-1x mr-2 ml-2">{{ photo.comments }}</i>
        </div>
      </app-card>
    </div>