When starting with an Ionic 4 app, you can build up a new app using one of the provided templates. The templates available are:

• Ionic 4 Blank - a starter blank app template so you can build anything you want.
• Ionic 4 Side Menu - an app template with the Ionic 4 side Menu component preconfigured.
• Ionic 4 Tabs - an app template with the Ionic 4 Tabs component preconfigured.

Click Create new > Ionic 4 from the Apps tab to access the preconfigured templates:

Ionic 4/5 Blank Template

👍

NEW: One-Click Template Installation!

You can now enjoy the one-click-away option of installing the blank Ionic 4 app: simply click the button below and in a moment, your app is ready to start! There’s no need to go to the Create new app dialog or download the template backup with further installing it.

Also, to create a new app based on the Ionic 4 Blank template, you can select it in the Create new app dialog.

This simplest template contains a blank app page and one Screen1 page with ion-content. Both pages have no specific settings.

Ionic 4 Side Menu Template

👍

Video Tutorial: Adding Side Menu to Ionic 5 App

You can also check out this video guide for detailed instructions on how to add a side menu to your Ionic 5 application:

To use the Ionic 4 Menu for navigation purposes, create a new app from the Ionic 4 Side Menu template.

👍

NEW: One-Click Template Installation!

You can now enjoy the one-click-away option of installing the app: simply click the button below and in a moment, your app is ready to start! There’s no need to go to the Create new app dialog or download the template backup with further installing it.

The template contains the following:

• app page.
• Three Screen pages: Home, Profile, Info.

Ionic 4 Side Menu Template UI

The following section describes how the template was created.

Screen Pages Design Tab

1. Three Screen pages (renamed to Home, Info and Profile) have similar UI: their Header Toolbar Title properties are set to True and their Text properties are defined as Home, Info, and Profile, respectively.
2. Also, per one Button component is added to the Header > Toolbar > Toolbar Buttons component of every page. Every Button has its Component property defined as Ionic Back Button.

app Page Design Tab

1. Side Menu was enabled on the app Page > PROPERTIES - IndexScreen by setting the Menu property to True.
2. The Menu Content contains the Menu List of three List Iitem components for navigation: HomeItem, ProfileItem, and InfoItem.
3. For MenuList, the List property is set to True and defined with the Click action for which the Run TypeScript action with code this.Apperyio.getController("MenuController").close(); is added.
4. Every List Item contains an Icon and a Label that are called respectively: HomeIcon and HomeLabel, ProfileIcon and ProfileLabel, InfoItem and InfoLabel. To allow labels, the Label property should be set to True for every List Item.
5. The Text properties of every Label are defined as Home, Info, and Profile, correspondingly.
6. The corresponding icon styles are applied to all three List Items's icons as their Name property and their Slot properties are set to Start.
7. The page navigation for List Items is defined under PROPERTIES > Routing: HomeItem routes to Home, ProfieItem routes to Profile and InfoItem routes to Info.
   The Sliding State property is set to Swipe Right for every List Item.
8. Add the Click action with the code this.Apperyio.getController("MenuController").close(); on your app page.

Extending Template

This section covers how to extend or modify this app template.

Adding New Page

For adding a new page, do the following:

1. Create a new page and name it (the Create navigation route for this page checkbox should be selected).
2. For the created page, provide the Text value for the Header Toolbar Title and drag & drop a Button to the Header > Toolbar > Toolbar Buttons component. For its Component property, select Ionic Back Button from the drop-down.
3. Now, go to the app page and using the project OUTLINE tab, select the List component.
4. Add a new List Item by clicking the green + sign, rename the component, and define the Routing property so that its Route Name sub-property be linked to the newly created page.
5. Select the List Item's Label, rename the component, and provide a new value for its Text property.
6. Add an Icon to the new List Item. Define its Component name property, and select the needed icon to define the Name property, and set Slot to Start.

Deleting Existing Page

To delete the existing page:

1. Delete the page using its page context menu.
2. It is recommended that the existing route to the page in the Routing section be deleted.
3. Delete the corresponding list item on the side menu list.

📘

You can also check this tutorial to learn how to create a simple Ionic 4 mobile application with a menu in Appery.io.

Ionic 4 Tabs Template

If you want to use Tabs for navigation purposes, create a new app from the Ionic 4 Tabs template.

👍

NEW: One-Click Template Installation!

You can now enjoy the one-click-away option of installing the app: simply click the button below and in a moment, your app is ready to start! There’s no need to go to the Create new app dialog or download the template backup with further installing it.

The project based on this template contains:

• Blank app page.
• Three Screen pages: Home, Info, Profile.
• Tabs page with three bottom navigation tabs.

Ionic 4 Tabs Template UI

This section describes how the template was created.

Screen Pages Design Tab

1. Three Screen pages (renamed to Home, Info and Profile) have similar UI: their Header Toolbar Title properties are set to True and their Text properties are defined as Home, Info, and Profile, correspondingly.
2. The Footer Toolbar is disabled by setting the page Footer property to False.

Tabs Page Design Tab

How the page is designed.

1. The tabs functionality is enabled by setting the page Tabs property to True.
2. The Tab Bar contains three Tab Buttons Home, Info, Profile. To define the Tab Bar position, set its Slot property to Bottom.
3. The Label > Text properties for all Tab Buttons are defined as follows: Home, Profile, and Info.
4. To change the icon style of the bottom tabs, the Icon > Style property is used.
5. To define the proper routing, every Tab Button has its Tab property defined accordingly.

Under the Routing tab, enable Tabs as the Default route.

Extending Project

This section describes how to customize app templates.

Adding New Page

For adding a new page, do the following:

1. Create a new page and name it (the Create navigation route for this page checkbox should be selected).
2. For the created page, provide the Text value for the Header Toolbar Title and disable the Footer Toolbar by setting the page Footer property to False.
3. Now, go to the Tabs page and using the project OUTLINE tab, select the Tab Bar component.
4. Add a new Tab Button by clicking the green + sign inside the Tab Bar. For its Tab property, select the corresponding page value from the drop-down.
5. Under its PROPERTIES tab, expand the Icon property and set the needed Style icon, then expand the Label property and define its Text.

Renaming Existing Page

How to rename the existing page:

1. In the Project view, click the cog icon to invoke the context menu. From the drop-down, select Rename. Then provide a new page name and confirm.
2. Go to the page and change its Header Toolbar Title Text.
3. You can also rename the route of the page under Project > Routing, but these changes don't affect the UI.
4. Now, switch to the Tabs page, select the corresponding tab item and make sure that the corresponding Tab property is updated.

Deleting Existing Page

How to delete the existing page:

1. Delete the page using its context menu.
2. It is recommended that the existing route to the page in the Routing section be deleted.
3. Delete the corresponding tab button item in the Tabs Bar.

📘

You can also check this Appery.io Community video to learn how to create an Ionic 4 app with tabs using the Appery.io platform: