Components

Now that we’ve learned about decorators and classes, let’s learn about components in detail.

Creating a new component

The following command creates a new page within the pages sub-directory of our app (if this sub-directory does not exist it will be created by the Ionic CLI):

ionic g page pages/<page-name>

We can prefix the page name with a directory, but it is not required (if this directory does not exist it will be automatically created by the Ionic CLI).

Try copying the following command into the terminal provided below to create an “About” page.

ionic g page pages/about

With one simple command, we have generated a new component for our app!

Files in a component

Our newly created component contains the following files:

• The about-routing.module.ts file, which contains the Angular routing module.
• The about.module.ts file, which determines the files to be loaded only for this component and not across the entire application.
• The about.page.html file, which houses the template for our page component.
• The about.page.scss file, which contains the style rules for our page component.
• The about.page.spec.ts file, which contains the unit testing file for this component.
• The about.page.ts