Skip to main content

Ionic 2 Beginner : Creating Pages / Components In Ionic 2

In this post we will see how we can create custom views/ pages / Components in Ionic 2. First thing that I want to mention right off the bat is that I will no longer use the term view because in Ionic 2 there is no concept of standalone views. In Ionic 2 Views and Controllers have been bundled into what is called a component.

We will be using the blank template to start with and create everything that we need for our second view from scratch.

Let’s start off by creating a blank Ionic 2 project.

There are two ways of creating a Page / Component.

  1. Creating Individual files one by one
  2. Using the Command Line

In the first approach we create all the individual files by one by one, recommend you read through this approach so that you understand the naming patterns of files. The second approach uses an Ionic command which makes life easy for us. I recommend using the second approach once you understand whats’ going on.

 

Approach 1) Creating Individual files one by one

Step 1)

Open up your command prompt and run the following commands

Now let’s add Android and iOS platforms to our project.

You can only add iOS as a platform if you have a Mac computer.

Now if we open up our customPage folder we will see the following files and folders in it

 

Step 2)

We will be working in the src\pages folder, the blank template will have a folder calledĀ homeĀ already in it, we will create a new folder named other. If you are using any other template you will have other folders in it as well. These folders will act as pages for our app.

Step 3)

Inside of the src\pages\other we will create three files namely other.html, other.scss, and other.ts. Notice how all of the files in one component are grouped in one folder with the same name this is the new way of doing things with angular 2.

 

Step 4)

Now let’s put some code into our files we will start off by coding the other.html file

 

Step 5)

Just for the sake of simplicity we will create a basic other.scss file

 

Step 6)

Finally, we will create the other.ts file like the following

And just like that, you have a shiny new component for your Ionic 2 app. Here notice that we are using the @Component decorator and inside we have templateUrl which points to the other.html file for this component. You will see not see any changes in your app as the blank app by default is loading the home component which can be found in src\app\pages\home.

 

Approach 2) Using The Command Line

In the first approach, we had to create individual files and place them inside our src\app\pages. Ionic provides us with a command that does all of that for us in one go. We can generate the same page using the following command

Here the g is an abbreviation for generate.

Note: If you use the ionic g page command to generate pages and if the page with the same name exists, Ionic CLI will not throw an error. It will simply overwrite the existing page with a new one.

 

 

But How Do I Navigate Between Pages In Ionic 2?

Fear not I got you covered in this post here where we will build upon what we have learned here and navigate as well as pass parameters to the second page.

 

Conclusion

In this tutorial, we saw what it takes to create a new page from scratch for Ionic 2 apps. All it takes is to create Html, Css and TypeScript files in a folder, now this folder will act as a page which is also called a “Component” as a whole. I recommend using the ionic g page command to generate pages.

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper
Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)