66

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
9
  • 11
    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. Jul 24, 2017 at 11:46
  • 2
    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... Jul 24, 2017 at 11:46
  • Yes,What about ionViewWillLeave() event for clearing subscriptions? Is that not good? @sebaferreras
    – Sampath
    Jul 24, 2017 at 11:51
  • 1
    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. Jul 24, 2017 at 12:01
  • 1
    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. Jul 24, 2017 at 14:09

2 Answers 2

83

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.

3
  • 3
    Thanks a lot for nice explanation :)
    – Sampath
    Jul 24, 2017 at 15:09
  • 1
    Is this answer equally valid for Ionic 4?
    – user2493235
    Feb 26, 2019 at 18:50
  • @NigelPeck Not exactly... Please check this link for a good explanation about life cycle hooks in Ionic 4 :) Feb 26, 2019 at 19:31
12

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.