67, Obafemi Awolowo way, Ikeja Lagos +234 802 302 0838 info@ionicdon.com
How to Add Tabs Bar in Ionic 4 Application

How to Add Tabs Bar in Ionic 4 Application

In this tutorial, we are going to add tabs and create navigation to an ionic application, as you know, tabs bar is a sleek way of presenting information and makes application robust and each module are easily available.

To achieve our task of the day, we need to do the following

  1. Create an app called TabsBarApp
  2. Add three new pages to the application
  3. Modify the app default loading page.
  4. Delete home directory from the application
  5. Create tabs bar in the new default loading page
  6. Modify the module.ts file of the default loading page
  7. Test the app.

Having listed all the step necessary to achieve our task of the day, let get started.

Are you ready!!!

Create an app called TabsBarApp

Now, open you Command Line Interface (CLI) and create an app called TabsBarApp with following command

  • startwill tell the CLI create a new app.
  • TabsBarApp will be the directory name and the app name from your project.
  • blankwill be the starter template for your project.

Press enter key

You will be prompted to choose a framework for your project, choose angular and press enter key again as shown below

ionicdon ionic start

Let’s run our app in the browser to ascertain it is alright, change directory to the newly create app name, that is, TabsBarApp and run the app with the following code using our CLI

–l in the syntax will run the app in lab mode.

Hence, at a point the system will recognize that ionic-lab has not been installed in the project and will prompt you for the installation as shown below.

Type yes and press return key

After the ionic-lab installation is completed, the application will be serve into your default browser as shown below.

2.  Add three new pages to the application

Open your CLI, issue the following command to create the three new pages

g or generatewill tell the CLI generate
page will generate page
pages/tabs will do two things first, it will create a folder called pages and name the page generated the name tabs

after page called tabs has been created successfully, issue the same command to generate two more pages (tab1 and tab2) in the same folder as shown below

3.   Modify the app default loading page.

Now, open app-routing.module.ts in your favorite code editor( in my own case, I have VS Code, you can use any editor of your choice, it doesn’t matter)

Change the index path to tabs by changing reDirectTo: value to tabs as shown in the figure below

Save and check your browser to see the new index or default page has changed to tabs, does it? If your answer is yes, then let’s get going!!

4.  Delete home directory from the application

Right click the directory/ folder named home   and click delete from the pop-up menu as shown below.

Delete the following line from app-routing.module.ts

That is the line immediately under the root path

5.  Create tabs bar in the new default loading page

Open tabs.page.html and replace the content with the following

Ion-tabs and ion-tab-bar are ionic component used to implement a tab based navigation that behave like a native app,

slot is used to define where it is projected in the app.

Save the file.

6. Create the navigation route link

Open tabs-routing.module.ts file.

Add the following code to the file 

Save all files, routing.module.ts file will look the image below

7. test the App

Open the CLI again, issue the same command from step 1

Leave a Reply

Close Menu