Ionic 3 Component vs Page

Question

Can you tell me what is the difference between Component and Page generator in the Ionic 3 app? It seems I can use page life cycle hooks like ionViewWillLeave inside the component too.So when should I use angular life cycle hooks then? If it is same then Why it has 2 generators? Hope you'll provide a feedback for this.

Component generator:

 ionic generate component SubscribeTopicComponent

Page generator:

ionic generate page LoginPage

Enlightenment

It may be the same from the Angular point of view, but Pages and Components have a different meaning in Ionic. Both are just components, but a Page is a component that will act as an entire view (it may have nested components); we see Ionic pages as a standalone concept. A component will be just part of a bigger component most of the time in Angular apps, so I guess that's the biggest difference with Pages. – Airsick

About when using Angular's lifecycle hooks, I like to use them when working in components, but I prefer Ionic lifecycle hooks when working on pages. Mostly because ionViewWillEnter doesn't make too much sense inside of a simple component, where ngOnInit does. I also use some Angular lifecycle hooks on Pages, like the ngOnDestroy (I use it to remove all the subscriptions from a page when that page is destroyed). I'm not sure if this is the best way to use them, but I guess it makes sense... – Airsick

Yes,What about ionViewWillLeave() event for clearing subscriptions? Is that not good? @Airsick – Enlightenment

It wouldn't be right, since that hook means that the user is leaving the page, but not that the page is going to be destroyed, thus leaving some memory leaks. Since Ionic caches the pages, if you use ionViewWillLeave you may clean up the subscriptions and the next time the user goes to that page (if it was cached, and thus, not created again) the code related to those subscriptions won't be executed. – Airsick

I guess that Ionic lifecycle hooks are more related to the user interaction (will enter, will leave, can enter, can leave...) and Angular lifecycle hooks are more related to the different stages of the life of a component (which may not be directly related to the user interaction at all). – Airsick

OK.But hope this what we need no? ionViewWillUnload - Runs when the page is about to be destroyed and have its elements removed..Can't we use this? @Airsick – Enlightenment

According to your comment above where you created subscriptions? Inside the constructor? It depends on the place where we create the subscriptions no? I mean the clearance of subscriptions? If we create it inside the ionViewDidEnter() then it doesn't depend on the cache scenario no? @Airsick – Enlightenment

I got huge knowledge using your comments above.If you put all together(as an answer) in one place hope others also can get very good insight about this area.@Airsick – Enlightenment

Thanks a lot :) Just like you said ionViewWillUnload seems like the right place to do the clean up (for some reason I was not aware of that hook). And also you're right about the cache scenario, if you use Ionic hooks to create the subscription, you can also use Ionic hooks to clean it up. It's all about in what particular time (hook) do you want to do something. – Airsick

Answer 1

Based on the conversation from the comments:

It may be the same from the Angular point of view, but Pages and Components have a different meaning in Ionic. In terms of Angular, both are just components, but in the context of Ionic, a Page is a component that will act as an entire view (it may have nested components); we see Ionic pages as a standalone concept. A component will be just part of a bigger component most of the time in Angular apps, so I guess that's the biggest difference with Pages.

About when using Angular's lifecycle hooks, I like to use them when working in nested components, but I prefer Ionic lifecycle hooks when working on pages. Mostly because things like ionViewWillEnter doesn't make too much sense in the context of a simple component, where ngOnInit does. That being said, I also used some Angular lifecycle hooks on Pages, like the ngOnDestroy (I used it to remove all the subscriptions from a page when that page is going to be destroyed), but just like you said, ionViewWillUnload seems to be the right way to do it if we want to use Ionic's lifecycle hooks.

I guess that most of the Ionic lifecycle hooks are more related to the way the user interacts with the page as a whole (will enter to a page, will leave from a page, can enter to a page, can leave from a page...) and Angular lifecycle hooks are more related to the different stages of the life of a single component (the inputs has been initialized, the change detector has checked if there were changes in this component, ...), which as you can see, may not be directly related to the user interaction at all, and usually are things that the user is not aware of.

I'm pretty sure there isn't a rule about which approach is better, but the most important thing is consistency. I think it make sense to use Ionic lifecycle hooks in the components that are Pages, and use Angular lifecycle hooks inside of nested components, but you can use a different approach, as long as you do it consistently in the entire app.

Airsick

Thanks a lot for nice explanation :) – Enlightenment

Is this answer equally valid for Ionic 4? – Enunciation

@NigelPeck Not exactly... Please check this link for a good explanation about life cycle hooks in Ionic 4 :) – Airsick

Answer 2

There are two separate generators because one extra decorator that was added to ionic: @IonicPage

This decorator gives a few advantages over a simple component.

1. Routing - you can signify what is the url of the page, how to get there and what is its default history. With this you can access any page directly without going through the navigation path. The routing to this page can also be done with a string rather than the actual component

2. Lazy loading - the module of a page that has this decorator will be lazy loaded by default when going to the url of the page.

3. No app module reliance - this is more of a personal favorite but when you create modules that are pages you don't have to add them to your original ngModule and this is done automatically on compilation.

For more documentation: https://ionicframework.com/docs/api/navigation/IonicPage/

Catcher

Answer 3

i think that the most important difference in newer version of ionic at least is that when generating pages a module file is included that allow the integration of other component conceptiolly in the page which is not the case for componentd ionic generate a html,css,ts files;

Undertone