Event when ngIf div is rendered


I’m wanting to capture an the event when a div displays. It’s set up with an ngIf inside a div.

I don’t know what I’m doing wrong, but I can’t get this to work. I get no errors, but it doesn’t work for me.

My directive is defined as:

import { AfterContentInit, EventEmitter, Output, Directive } from '@angular/core';

@Directive({ selector: '[after-if]' })
export class AfterIfDirective implements AfterContentInit {
  public after: EventEmitter<AfterIfDirective> = new EventEmitter();

  public ngAfterContentInit(): void {
    setTimeout(() => {
      // timeout helps prevent unexpected change errors

In my page component I import.

import { AfterIfDirective } from '../directives/after-if';

  providers: [],
  imports: [NgModel, BrowserAnimationsModule, HttpClientModule, AfterIfDirective],
  exports: [NgModel, BrowserAnimationsModule, AfterIfDirective]

and in the html:

<div *ngIf="chkTearline.checked; else NotTearline" (after-if)="Clicked()" >
what am I missing?

Does this not work in Angular 5?