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

Solution 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.

Solution 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/

Comments

[Sampath]

Thanks a lot for nice explanation :)

[Admin]

Is this answer equally valid for Ionic 4?

[sebaferreras]

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