How to use this template?

Many of you ask us which is the best way to use the template to build you app, and the answer is: IT DEPENDS!

If you plan to use many of the pages and features offered by the template, then I suggest you to go with the option 1.

If you only want to use some specific pages or components and you already have an existing Ionic 4 app, then I suggest you to go with option 2 so you don't have to waste time deleting the things you don't need.

1. Use the template app as a base to create your app

This means that the template is itself an Ionic app, so you don't need to create another app. You can use the template app as a base for your app and just delete the pages you don't want, and add what is missing.

2. Import some pages into an existing Ionic 4 app

How to do this? Let's assume you want to add the Contact Card page (and all its styles) to you app.

Copy the page folder

Copy the entire contact-card folder from src/app/contact-card

App Shell

Copy the utils folder which includes the ShellProvider from src/app/utils

The Shell has two properties that you need to add to your environment file:

export const environment = {
production: false,
shell: {
debug: false,
networkDelay: 2000


If you didn't change the theme folder from your existing app, then delete it and copy the entire theme folder from the template.

If you did change the theme folder from your existing app, then just copy the rest of the files from the theme folder expect the variables.scss file. Then open this file and add the styles we set for the template such as the font-family and the margins.


If you want to use any of the custom components then copy all the components folder from src/app/components

Note that we use dayjs library for the countdown components, so if you want to use it you need to install it by running: npm install [email protected] --save


Add the new route to your routing file such assrc/app/app-routing.module.ts