How to use this template?

Learn which is the best way for you to use this template. There are two ways: as a starter app or as a toolbox.

First of all, please make sure you followed the Set up the development environment and Running the app sections.

As a starter app

If you plan to use many of the pages and features offered by the template, then you could use the template 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 as a base for your app and just delete the pages you don't want, and customize them to create your own and unique app.

As a toolbox

If you only want to use some specific pages or components and you already have an existing Ionic App, then it would be better for you to just import the features and components your need into your existing app.

If you want to start with a small portion of the template, just with the initial authentication screens, and the tabs and side menu navigation just send us an email to [e-mail] including your github username and we will share the repo with you.

Import some pages into your existing Ionic Application

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 shell files from src/app/shell

Environment

Add the following code into your environment.ts file:

  appShellConfig: {
    debug: false,
    networkDelay: 0
  }

Theme

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.

Components

If you want to use any of the custom components then copy all the components folder from src/app/components and import the module from the AppModule.

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 dayjs@1.8.0 --save

Routing

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

Icons

We designed many custom icons for this template and you are free to use them if you like. All of them are located in the src/assets/sample-icons folder. If you want to use them you need to include them in your project.

angular.json file

Add the following code into your angular.json file just before the "styles": ["src/theme/variables.scss", "src/global.scss"]

....
"stylePreprocessorOptions": {
      "includePaths": [
        "src"
      ]
    },
....

We are currently recording videos showing how to use the different tools from the template into your own Ionic App.

Want to suggest any specific topic? Send us an email to [e-mail]

Additional resources

We are creating different projects with smaller portions of the template to help you getting started. If you want access to any of them send us an email to [e-mail] including your github username and we will share the repo with you. Currently we have:

• Ionic Full Starter App Basic Simplified: this is a simplified version of the template without App Shell and without the perceived performance improvements from the App Shell solution. Thus, the data resolvers are simpler.
• Auth and Tabs: just contains the authentication pages and the tabs and side menu navigation.
• App Shell Components: a project that will help you understand how to use the template app shell components in your own Ionic app.
• Firebase Starter: in progress.