Эмиссия событий из директивы не работает

Question

Я борюсь с получением какого-либо значения от моего источника событий, который находится внутри директивы. Я совершенно новичок в Angular и не знаю полностью, что там не так. Заранее спасибо. Я уверен, что значения вводятся в метод onMouseEnter(), потому что они регистрируются там на консоли, но метод changePar() не был вызван ни разу. Не могли бы вы дать мне какой-нибудь совет, что там не так?

Компонент:

@Component({
  selector: 'app-our-history',
  templateUrl: './our-history.component.html',
  styleUrls: ['./our-history.component.css'],
  providers: [MakeActiveDirective]
})
export class OurHistoryComponent implements OnInit {

  private history: Observable<HistoryModel[]>;
  private desc: string;


  constructor(private dsService: DataStorageService) {
  }

  ngOnInit() {
    this.history = this.dsService.fetchHistory();
  }

  changePar(data: string) {
    this.desc = data;
    console.log(data);
  }
}

Файл HTML:

<div class="main-container">
  <h1>This is our history!</h1>
  <div class="wrapper">
    <div class="timeline-area">
      <div class="line-area"></div>
      <div *ngFor="let historyItem of (history | async)"
           class="single-item"
           appMakeInactive>
          <span appMakeActive
                [item]="historyItem">
            {{ historyItem.historyHeading }}
          </span>
        <div class="img-area">
          <a href="">
            <img [src]="historyItem.image | addPrefix" alt="">
          </a>
        </div>
      </div>
      <div appMakeActive (historyItem)="changePar($event)"> {{ desc }}</div>
    </div>
  </div>
</div>

Директива:

@Directive({
  selector: '[appMakeActive]'
})
export class MakeActiveDirective {

  @Output() historyItem: EventEmitter<string> = new EventEmitter<string>();

  @Input() item: HistoryModel;

  constructor(private elementRef: ElementRef,
              private renderer: Renderer2) {
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.elementRef.nativeElement.parentElement.classList.add('active');
    this.historyItem.emit(this.item.historyDescription);
    console.log(this.item.historyDescription);
  }
}