Difference between @Page and @Component

What is the difference between @Page and @Compoenent?

Both work, but I would like to understand the difference.

@Page got deprecated on 2.0.0.beta.8, now @Component does the job :wink:


Still we are using page and component with latest ionic 3.6.0, want to understand when to use page and component. What is the difference ?

That would surprise me. @Page was removed quite a while ago.

We are not using the @Page anymore, but what confuses is that it still using for names in general.

for example, the start repo and other resources still giving views names as Page, example https://github.com/ionic-team/ionic-starter-super/blob/master/src/pages/cards/cards.ts#L8

Wouldnt be better if ionic follow the angular patterns (like files cards.component) and ina module way (creating cards.module as well) and class names with CardComponent instead of CardsPage ?


1 Like

but if we create an app then the ionic by default use the page like home page, and if you are creating the tabs app then ionic by default will create the pages (not component like home.component). so how can we say that we are not using the @Page .

It’s just a conceptual/architectural difference - pages are just components that we call pages. We generally distinguish the “pages” in our application because these are the main “views” in the application (e.g. home page, products page, about page). As opposed to “smaller” components like a header, or a button, or a calendar.

When creating a page in Ionic it is a component like any other, meaning that it also has a selector, e.g app-home, so just like we could with any normal component we could drop that in our application like this:


But we don’t do that for “pages” as the Ionic router handles displaying these “views” (which are still just components) for us. Even though they are the same at a technical level, it does make sense to distinguish “pages” from generic components.