How to build hybrid app using Ionic 3 and Angular 4


In this article, I am going to explain to you how to build hybrid mobile app using Ionic 3 and Angular 4, this app displays list of articles which are posted on my WordPress blog

Step 1: Setting up local environment

The first thing which I am going to do is setting up local environment for Ionic by running below commands, before running commands make sure that you have already install Node.js 6 or later

Once the installation is successful, then to create a new project we need to use below ionic commands, here, the start command create a new project called “keysandstrokes” using sidemenu template, if you don’t specify any template type then it takes tabs template as a default template

Now, run below command to test ionic app, this command launches ionic app in the browser using 8100 port number

Step 2: Creating Ionic Provider

We need to create Ionic provider which is kind of service in Angular 4, this ionic provider will make a request to the rest API and get the response in the form of JSON, the article Ionic page will consume this provider to display list of articles using ion-card component

Once, the command is successfully executed then go to providers folder and open the article.ts file then replace the existing code with below one

Step 3: Creating Ionic Page

We have completed creating ionic service, now it’s time to consume this in ionic page for this we need to run below command to create an ionic article page

A new article folder which contains article page will be created under pages folder,  open articles.ts file and replace with below code

Now, in the same article folder, you will see another file called article.html,  open articles.html file and add below code

Now, go to the home folder and add image, some text and link button in home.html file


Step 4: Adding page to sidemenu

To add our recently created page in the sidemenu we need to edit app.component.ts file which is under app folder, here, I have deleted existing ListPage and added new ArticlesPage to the pages JSON array

Update sidemenu list by adding ion-icon in the app.html file

Step 5: Updating theme colors

To change theme colors we need to edit the theme/variable.scss file and update the colors with whatever you want to apply

Now, run the ionic serve command, you should see something like below the blue color should apply on navigation bar and icons should appear to every side menu links



The final step is we need to update app module, for this open app.module.ts file and below AtriclePage and ArticleProvider related entries

Step 6: run ionic serve command

The final output should look like below

ionic-one ionic-three