Ionic 4: How can I access the lifecycle hooks from a directive?

I need to execute code in response to the didEnter and didLeave events, from the execution context of a directive.
In ionic3 I realized this by subscribing to the corresponding events on ViewController.

From my understanding, the new Angular LifeCycle hooks are only called on the page component itself and not its children.
So how can I do this in Ionic4?

I poked a bit around and came up with the following idea

import { fromEvent } from 'rxjs';
import { ElementRef, Injectable } from '@angular/core';
import { ViewLifecycle } from '@ionic/core';
import { Observable } from 'rxjs/Observable';

export class LifeCycleHookCatcher {

	private parentPage: HTMLElement;

	constructor(private elementRef: ElementRef) {
		this.parentPage = document.querySelector(this.elementRef.nativeElement).closest('.ion-page');

	public on(hook: ViewLifecycle): Observable<Event> {
		return fromEvent(this.parentPage, hook);

While this may work it feels like I’m using ionic not in the way I was supposed to. Its possible that this is the result of my unusual use case, but even then, do you know any clean[er] way to accomplish the above?

1 Like

Note: This does not work as injectable because the elementRef would never be updated. So just create it normally with new and pass the ementRef from the parent context directly on creation:

class ... {
    private lifeCylceHooks: LifeCycleHookCatcher;

    constructor(private ref: ElementRef) {
        this.lifeCylceHooks = new LifeCycleHookCatcher(this.ref);


OR use a factory to create it…