{"id":1533,"date":"2016-11-29T17:03:10","date_gmt":"2016-11-29T17:03:10","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1533"},"modified":"2016-11-29T17:09:20","modified_gmt":"2016-11-29T17:09:20","slug":"navigating-lifecycle-events","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/navigating-lifecycle-events","title":{"rendered":"Navigating Lifecycle Events!"},"content":{"rendered":"<p><em>Enrique Oriol is the CTO of a Barcelona-based startup and frequently writes about Ionic in Spanish on his <a href=\"http:\/\/blog.enriqueoriol.com\">blog<\/a>, where this post originally appeared. He also teaches Ionic 2 at <a href=\"https:\/\/www.udemy.com\/aprende-ionic-2-desde-cero\">Udemy<\/a>.<\/em><\/p>\n<p>In native apps (iOS, Android), views have a well structured lifecycle that allows you to perform actions on key points of their execution. Ionic 2 has a similar feature: Navigation Lifecycle Event.<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle.png\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"489\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle.png\" alt=\"ios native view lifecycle image\" class=\"aligncenter size-full wp-image-1534 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle.png 700w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle-300x210.png 300w\" data-sizes=\"auto, (max-width: 700px) 100vw, 700px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 700px; --smush-placeholder-aspect-ratio: 700\/489;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"489\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle.png\" alt=\"ios native view lifecycle image\" class=\"aligncenter size-full wp-image-1534\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle.png 700w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle-300x210.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/noscript><\/a><\/p>\n<p>In Ionic 2, any view added or removed from a <a href=\"http:\/\/ionicframework.com\/docs\/v2\/api\/navigation\/NavController\/\"><code>NavController<\/code><\/a> emits certain events. You can take advantage of those events to instantiate the view, refresh content, or store data.<\/p>\n<p>I&#8217;ll teach you how to use them in a hands-on code example, but first, let&#8217;s dig into the concept!<br \/>\n<!--more--><\/p>\n<h3>Lifecycle events<\/h3>\n<p>Ionic 2 Navigation events are quite similar to those from iOS. Here&#8217;s a diagram that explains how they work:<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/ionicViewLifecycleEvents.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"714\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/ionicViewLifecycleEvents.png\" alt=\"ionic view lifecycle events image\" class=\"aligncenter size-full wp-image-1535 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/ionicViewLifecycleEvents.png 1200w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/ionicViewLifecycleEvents-300x179.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/ionicViewLifecycleEvents-768x457.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/ionicViewLifecycleEvents-1024x609.png 1024w\" data-sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/714;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"714\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/ionicViewLifecycleEvents.png\" alt=\"ionic view lifecycle events image\" class=\"aligncenter size-full wp-image-1535\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/ionicViewLifecycleEvents.png 1200w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/ionicViewLifecycleEvents-300x179.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/ionicViewLifecycleEvents-768x457.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/ionicViewLifecycleEvents-1024x609.png 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/noscript><\/a><\/p>\n<p>In summary, these are the events:<\/p>\n<ul>\n<li><code>ionViewDidLoad<\/code>: Fired <strong>only when a view is stored in memory<\/strong>. This event is NOT fired on entering a view that is already cached. It&#8217;s a nice place for init related tasks.<\/p>\n<\/li>\n<li>\n<p><code>ionViewWillEnter<\/code>:  It&#8217;s fired when entering a page, <strong>before it becomes the active<\/strong> one. Use it for tasks you want to do every time you enter in the view (setting event listeners, updating a table, etc.).<\/p>\n<\/li>\n<li>\n<p><code>ionViewDidEnter<\/code>:  Fired when entering a page, <strong>after it becomes the active page<\/strong>. Quite similar to the previous one.<\/p>\n<\/li>\n<li>\n<p><code>ionViewWillLeave<\/code>:  Fired when you leave a page, <strong>before it stops being the active<\/strong> one.  Use it for things you need to run every time you are leaving a page (deactivate event listeners, etc.).<\/p>\n<\/li>\n<li>\n<p><code>ionViewDidLeave<\/code>:  Fired when you leave a page, <strong>after it stops being the active<\/strong> one. Similar to the previous one.<\/p>\n<\/li>\n<li>\n<p><code>ionViewWillUnload<\/code>:  Fired <strong>when a view is going to be completely removed<\/strong> (after leaving a non-cached view).<\/p>\n<\/li>\n<\/ul>\n<h3>Nav guards<\/h3>\n<p>As a bonus track, there are two other powerful methods related to those events: <em>nav guards<\/em>. Those methods are focused on view access control (with authentication purposes).<\/p>\n<ul>\n<li><code>ionViewCanEnter<\/code>:  Fired before entering into a view, allows you to control whether the view can be accessed or not (returning <em>true<\/em> or <em>false<\/em>).<\/p>\n<\/li>\n<li>\n<p><code>ionViewCanLeave<\/code>:  Fired before leaving a view, allows you to control whether the view can be left or not.<\/p>\n<\/li>\n<\/ul>\n<p><strong>It is important to highlight that Nav Guards are executed before any other lifecycle event method.<\/strong><\/p>\n<h3>Hands-on code!<\/h3>\n<h3>Ambient music player<\/h3>\n<p>I&#8217;ve always though that the best way to understand something is to put it into practice. That&#8217;s why I&#8217;m bringing you this funny example: <strong>An ambient music player<\/strong>. You can download the full source code from <a href=\"https:\/\/github.com\/kaikcreator\/ionic2LifeCycleExample\">this link<\/a>.<\/p>\n<p>This very simple example consists of an app with three views:<\/p>\n<ul>\n<li>The <strong>Home view<\/strong> allows you to choose the ambient.<\/li>\n<li>The <strong>Music view<\/strong> plays the ambient music. Here&#8217;s where you&#8217;ll need to use the <em>lifecycle events<\/em>.<\/li>\n<li>The <strong>Credits view<\/strong> is accessed through <em>Music<\/em> view, and it simply displays some data.<\/li>\n<\/ul>\n<p>The navigation flow between views is:<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfFlow.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"261\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfFlow.png\" alt=\"relax yourself flow image\" class=\"aligncenter size-full wp-image-1537 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfFlow.png 1200w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfFlow-300x65.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfFlow-768x167.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfFlow-1024x223.png 1024w\" data-sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1200px; --smush-placeholder-aspect-ratio: 1200\/261;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"261\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfFlow.png\" alt=\"relax yourself flow image\" class=\"aligncenter size-full wp-image-1537\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfFlow.png 1200w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfFlow-300x65.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfFlow-768x167.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfFlow-1024x223.png 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/noscript><\/a><\/p>\n<p>The Music view will play music based on the selected ambient. To make it simple, the <strong><a href=\"https:\/\/howlerjs.com\">howler.js<\/a> library is used to play the music<\/strong>.<\/p>\n<h3>Home view<\/h3>\n<p>The main view is quite simple: There&#8217;s a list of buttons to go to the different environments, with a background image and a label. Some SaSS came to the rescue to make it prettier.<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfMainView.png\"><img loading=\"lazy\" decoding=\"async\" width=\"338\" height=\"600\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfMainView.png\" alt=\"relax yourself main view image\" class=\"aligncenter size-full wp-image-1536 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfMainView.png 338w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfMainView-169x300.png 169w\" data-sizes=\"auto, (max-width: 338px) 100vw, 338px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 338px; --smush-placeholder-aspect-ratio: 338\/600;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"338\" height=\"600\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfMainView.png\" alt=\"relax yourself main view image\" class=\"aligncenter size-full wp-image-1536\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfMainView.png 338w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfMainView-169x300.png 169w\" sizes=\"auto, (max-width: 338px) 100vw, 338px\" \/><\/noscript><\/a><\/p>\n<p>There&#8217;s nothing special in the template of this view, but take note that <code>goToMusicPage()<\/code> is the method in charge of navigating to each ambient.<\/p>\n<p><strong>home.html<\/strong><\/p>\n<pre><code class=\"html\">&lt;ion-header&gt;\n  &lt;ion-navbar&gt;\n    &lt;ion-title&gt;Relax yourself v0.1&lt;\/ion-title&gt;\n  &lt;\/ion-navbar&gt;\n&lt;\/ion-header&gt;\n\n\n&lt;ion-content&gt;\n\n  &lt;div class=&quot;imageBtn&quot; (click)=&quot;goToMusicPage(&#039;ocean-waves&#039;)&quot;&gt;\n    &lt;div class=&quot;image&quot; style=&quot;background-image:url(&#039;assets\/img\/ocean-waves.jpg&#039;);&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;label&quot;&gt;Ocean Waves&lt;\/div&gt;\n  &lt;\/div&gt;\n\n  &lt;!-- ...some more DIVs like this ...--&gt;\n\n&lt;\/ion-content&gt;\n<\/code><\/pre>\n<p>In the component code, you can see the details of the <code>goToMusicPage<\/code> method:<\/p>\n<p><strong>home.ts<\/strong><\/p>\n<pre><code class=\"javascript\">import { Component } from &#039;@angular\/core&#039;;\nimport { NavController } from &#039;ionic-angular&#039;;\nimport { MusicPage } from &#039;..\/music\/music&#039;;\n\n@Component({\n  selector: &#039;page-home&#039;,\n  templateUrl: &#039;home.html&#039;\n})\nexport class HomePage {\n\n  constructor(public navCtrl: NavController) {}\n\n  goToMusicPage(audio){\n    this.navCtrl.push(MusicPage, {audio});\n  }\n\n}\n<\/code><\/pre>\n<h3>Music view<\/h3>\n<p>The Music view is even simpler. It only shows an image related with the ambient and a button in the header to navigate to the Credits view.<\/p>\n<p>Yes, there&#8217;s music in this view!<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfMusicView.png\"><img loading=\"lazy\" decoding=\"async\" width=\"338\" height=\"600\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfMusicView.png\" alt=\"relax yourself app music view image\" class=\"aligncenter size-full wp-image-1538 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfMusicView.png 338w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfMusicView-169x300.png 169w\" data-sizes=\"auto, (max-width: 338px) 100vw, 338px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 338px; --smush-placeholder-aspect-ratio: 338\/600;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"338\" height=\"600\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfMusicView.png\" alt=\"relax yourself app music view image\" class=\"aligncenter size-full wp-image-1538\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfMusicView.png 338w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfMusicView-169x300.png 169w\" sizes=\"auto, (max-width: 338px) 100vw, 338px\" \/><\/noscript><\/a><\/p>\n<p>It&#8217;s worth mentioning that the Music template uses <a href=\"http:\/\/ionicframework.com\/docs\/v2\/api\/components\/nav\/NavPush\/\"><code>navPush<\/code><\/a> directly to navigate to the Credits view.<\/p>\n<p><strong>music.html<\/strong><\/p>\n<pre><code class=\"html\">&lt;ion-header&gt;\n  &lt;ion-navbar&gt;\n    &lt;ion-title&gt;Playing...&lt;\/ion-title&gt;\n\n    &lt;ion-buttons end&gt;\n      &lt;button ion-button icon-only [navPush]=&quot;creditsPage&quot;&gt;\n        &lt;ion-icon name=&quot;information-circle&quot;&gt;&lt;\/ion-icon&gt;\n      &lt;\/button&gt;\n    &lt;\/ion-buttons&gt;\n\n  &lt;\/ion-navbar&gt;\n&lt;\/ion-header&gt;\n\n&lt;ion-content&gt;\n  &lt;div [style.backgroundImage]=&quot;&#039;url(&#039; + image +&#039;)&#039;&quot;&gt;&lt;\/div&gt;\n&lt;\/ion-content&gt;\n<\/code><\/pre>\n<p>If there were no audio here, the <em>Music<\/em> component would be really simple:<\/p>\n<p><strong>music.ts<\/strong><\/p>\n<pre><code class=\"javascript\">import { Component } from &#039;@angular\/core&#039;;\nimport { NavController, NavParams } from &#039;ionic-angular&#039;;\nimport { CreditsPage } from &#039;..\/credits\/credits&#039;;\nimport * as howler from &#039;howler&#039;;\n\n\n@Component({\n  selector: &#039;page-music&#039;,\n  templateUrl: &#039;music.html&#039;\n})\nexport class MusicPage {\n\n  music:any;\n  image:string;\n  creditsPage:any;\n\n  constructor(public navCtrl: NavController, public params: NavParams) {\n    this.creditsPage = CreditsPage;\n  }\n\n  \/* lifecycle events *\/\n  \/\/TODO: add lifecycle events to load, play, pause and stop audio\n  \/* end lifecycle events *\/ \n}\n<\/code><\/pre>\n<p>However, as you can see, we need to use some lifecycle events to manage audio load and playing.<\/p>\n<h3>ionViewDidLoad<\/h3>\n<p>When you load any music ambient (push), you need to load its audio in memory, but only once. That&#8217;s why we use <code>ionViewDidLoad<\/code>.<\/p>\n<p>As you see, the ambient name is received as a parameter and used to load the audio and get the background image.<\/p>\n<pre><code class=\"javascript\">export class MusicPage {\n  \/* ...some stuff ...*\/\n\n\n  \/* lifecycle events *\/\n\n  ionViewDidLoad() {\n    let audioFile = this.params.get(&#039;audio&#039;);\n    this.music = new howler.Howl({ src: [`assets\/music\/${audioFile}.mp3`]});\n    this.image = `assets\/img\/${audioFile}.jpg`;\n  }  \n\n  \/\/TODO: add lifecycle events to play, pause and stop audio\n  \/* end lifecycle events *\/ \n}\n<\/code><\/pre>\n<h3>ionViewWillEnter<\/h3>\n<p>Every time <em>Music<\/em> becomes the active view, its audio must be played. I&#8217;m doing this inside <code>ionViewWillEnter<\/code> to make sure it also works when coming back from <em>Credits<\/em> view.<\/p>\n<p>Note: <code>ionViewWillLeave<\/code> would also work.<\/p>\n<pre><code class=\"javascript\">export class MusicPage {\n  \/* ...some stuff ...*\/\n\n  \/* lifecycle events *\/\n  ionViewDidLoad() {\/*...*\/}  \n\n  ionViewWillEnter(){\n    this.music.play();\n    this.music.loop(true);\n  }\n\n  \/\/TODO: add lifecycle events to pause and stop audio\n  \/* end lifecycle events *\/ \n}\n<\/code><\/pre>\n<h3>ionViewDidLeave<\/h3>\n<p>Every time the Music view stops being the active view, its audio must be paused. You can do this inside <code>ionViewDidLeave<\/code>, so it also works when entering Credits.<\/p>\n<p>Note: <code>ionViewWillLeave<\/code> would also work.<\/p>\n<pre><code class=\"javascript\">export class MusicPage {\n  \/* ...some stuff ...*\/\n\n  \/* lifecycle events *\/\n  ionViewDidLoad() {\/*...*\/}\n  ionViewWillEnter() {\/*...*\/}\n\n  ionViewDidLeave(){\n    this.music.pause();\n  }\n\n  \/\/TODO: add lifecycle events to stop audio\n  \/* end lifecycle events *\/ \n}\n<\/code><\/pre>\n<h3>ionViewWillUnload<\/h3>\n<p>Finally, it&#8217;s good to make sure that when you go back to the Home view, the audio from Music has completely stopped. That&#8217;s what we&#8217;re doing inside <code>ionViewWillUnload<\/code>.<\/p>\n<pre><code class=\"javascript\">export class MusicPage {\n  \/* ...some stuff ...*\/\n\n  \/* lifecycle events *\/\n  ionViewDidLoad() {\/*...*\/}\n  ionViewWillEnter() {\/*...*\/}\n  ionViewDidLeave() {\/*...*\/}\n\n  ionViewWillUnload() {\n    this.music.stop();\n    this.music = null;\n  } \n\n  \/* end lifecycle events *\/ \n}\n<\/code><\/pre>\n<h3>Credits view<\/h3>\n<p>The Credits view is a simple excuse to show you the usefulness of the lifecycle events. It&#8217;s so simple that a screenshot shows you everything:<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfCreditsView.png\"><img loading=\"lazy\" decoding=\"async\" width=\"338\" height=\"600\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfCreditsView.png\" alt=\"relax yourself app credits view image\" class=\"aligncenter size-full wp-image-1539 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfCreditsView.png 338w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfCreditsView-169x300.png 169w\" data-sizes=\"auto, (max-width: 338px) 100vw, 338px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 338px; --smush-placeholder-aspect-ratio: 338\/600;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"338\" height=\"600\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfCreditsView.png\" alt=\"relax yourself app credits view image\" class=\"aligncenter size-full wp-image-1539\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfCreditsView.png 338w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/relaxYourselfCreditsView-169x300.png 169w\" sizes=\"auto, (max-width: 338px) 100vw, 338px\" \/><\/noscript><\/a><\/p>\n<h3>Results<\/h3>\n<p>You&#8217;ll find a video with the results below. Turn up the volume!<\/p>\n<p><a href=\"https:\/\/youtu.be\/LSNpYj_p8iM\">https:\/\/youtu.be\/LSNpYj_p8iM<\/a><\/p>\n<p>I hope you enjoyed this little experiment. Let me know in the comments below if you have any questions!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Enrique Oriol is the CTO of a Barcelona-based startup and frequently writes about Ionic in Spanish on his blog, where this post originally appeared. He also teaches Ionic 2 at Udemy. In native apps (iOS, Android), views have a well structured lifecycle that allows you to perform actions on key points of their execution. Ionic [&hellip;]<\/p>\n","protected":false},"author":46,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3,13,25],"class_list":["post-1533","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic","tag-ionic-2","tag-tutorials"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Navigating Lifecycle Events! - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/navigating-lifecycle-events\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Navigating Lifecycle Events!\" \/>\n<meta property=\"og:description\" content=\"Enrique Oriol is the CTO of a Barcelona-based startup and frequently writes about Ionic in Spanish on his blog, where this post originally appeared. He also teaches Ionic 2 at Udemy. In native apps (iOS, Android), views have a well structured lifecycle that allows you to perform actions on key points of their execution. Ionic [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/navigating-lifecycle-events\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-29T17:03:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-11-29T17:09:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle.png\" \/>\n<meta name=\"author\" content=\"Enrique Oriol\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Enrique Oriol\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/navigating-lifecycle-events#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/navigating-lifecycle-events\"},\"author\":{\"name\":\"Enrique Oriol\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d250245396a527a2a956e7d5353676ba\"},\"headline\":\"Navigating Lifecycle Events!\",\"datePublished\":\"2016-11-29T17:03:10+00:00\",\"dateModified\":\"2016-11-29T17:09:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/navigating-lifecycle-events\"},\"wordCount\":877,\"commentCount\":15,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/navigating-lifecycle-events#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle.png\",\"keywords\":[\"Ionic\",\"Ionic 2\",\"Tutorials\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/navigating-lifecycle-events#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/navigating-lifecycle-events\",\"url\":\"https:\/\/ionic.io\/blog\/navigating-lifecycle-events\",\"name\":\"Navigating Lifecycle Events! - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/navigating-lifecycle-events#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/navigating-lifecycle-events#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle.png\",\"datePublished\":\"2016-11-29T17:03:10+00:00\",\"dateModified\":\"2016-11-29T17:09:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/navigating-lifecycle-events#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/navigating-lifecycle-events\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/navigating-lifecycle-events#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/navigating-lifecycle-events#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Navigating Lifecycle Events!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d250245396a527a2a956e7d5353676ba\",\"name\":\"Enrique Oriol\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b10db86f4986085d6c0c1ec029e2510f4a16b1c49f983c3c9cb2c9f6f79e3413?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b10db86f4986085d6c0c1ec029e2510f4a16b1c49f983c3c9cb2c9f6f79e3413?s=96&d=mm&r=g\",\"caption\":\"Enrique Oriol\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/enrique\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Navigating Lifecycle Events! - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/navigating-lifecycle-events","og_locale":"en_US","og_type":"article","og_title":"Navigating Lifecycle Events!","og_description":"Enrique Oriol is the CTO of a Barcelona-based startup and frequently writes about Ionic in Spanish on his blog, where this post originally appeared. He also teaches Ionic 2 at Udemy. In native apps (iOS, Android), views have a well structured lifecycle that allows you to perform actions on key points of their execution. Ionic [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/navigating-lifecycle-events","og_site_name":"Ionic Blog","article_published_time":"2016-11-29T17:03:10+00:00","article_modified_time":"2016-11-29T17:09:20+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle.png"}],"author":"Enrique Oriol","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Enrique Oriol","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/navigating-lifecycle-events#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/navigating-lifecycle-events"},"author":{"name":"Enrique Oriol","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d250245396a527a2a956e7d5353676ba"},"headline":"Navigating Lifecycle Events!","datePublished":"2016-11-29T17:03:10+00:00","dateModified":"2016-11-29T17:09:20+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/navigating-lifecycle-events"},"wordCount":877,"commentCount":15,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/navigating-lifecycle-events#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle.png","keywords":["Ionic","Ionic 2","Tutorials"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/navigating-lifecycle-events#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/navigating-lifecycle-events","url":"https:\/\/ionic.io\/blog\/navigating-lifecycle-events","name":"Navigating Lifecycle Events! - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/navigating-lifecycle-events#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/navigating-lifecycle-events#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle.png","datePublished":"2016-11-29T17:03:10+00:00","dateModified":"2016-11-29T17:09:20+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/navigating-lifecycle-events#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/navigating-lifecycle-events"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/navigating-lifecycle-events#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/iosNativeViewLifecycle.png"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/navigating-lifecycle-events#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Navigating Lifecycle Events!"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d250245396a527a2a956e7d5353676ba","name":"Enrique Oriol","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b10db86f4986085d6c0c1ec029e2510f4a16b1c49f983c3c9cb2c9f6f79e3413?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b10db86f4986085d6c0c1ec029e2510f4a16b1c49f983c3c9cb2c9f6f79e3413?s=96&d=mm&r=g","caption":"Enrique Oriol"},"url":"https:\/\/ionic.io\/blog\/author\/enrique"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/46"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1533"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1533\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}