Ionic 4 and the Lifecycle Hooks in Angular

Paul Stelzer
5 min readNov 4, 2018

There are a lot of questions related to Ionic 4 and the Lifecycle Hooks. There are new issues at the Ionic Github Repository where people complain that the Lifecycle Hooks are not working. So I will tell you in this article when the Lifecycle Hooks are running in Ionic 4.

Keep in mind: This post covers the package @ionic/angular— and so the combination of Ionic 4 and Angular. Ionic 4 will be available for other frameworks (like Vue), too (or use it standalone without any other framework).

For example:

When I navigate from the home to another route, the lifecycle ngOnDestroy of the home component is not executed

But why? Let’s start how Lifecycle Hooks working in Ionic 4!

TL;DR

Please skip to the end of the page, I added a short summary ;)

Ionic 4 uses the Angular Lifecycle Hooks

The first good news: Ionic 4 uses the Angular Lifecycle Hooks! So you can use ngOnInit, ngOnDestroy and all other Lifecycle hooks and do not have to remember the special ones from Ionic. Read more about Angular Lifecycle Hooks at the official documentation!

Short recap: How it was in Ionic 3

--

--

Paul Stelzer

Angular and Ionic Developer / SEO / WordPress — Always looking for new challenges!