Template changelog

2019-06-24 - New product variant release: PRO VERSION

Today we are releasing a new product variant with more features and screens than the current BASIC version. The new features include:

  • Firebase CRUD & filters

    • simple and advanced queries

    • related models

    • advanced usage of rxjs

    • Firestore database

  • maps & geolocation

  • video playlist

  • multi language

  • capacitor plugins

If you already bought the BASIC version and want to do the upgrade contact us and we will send you the instructions to upgrade by just paying the difference between BASIC and PRO version (which are just $10).

1.1.1 - 2019-06-21

Restructured the App Shell section from the Showcase to provide more examples and use cases. You can check the live demo in

We added examples of data binding for common use cases such as:

1.1.0 - 2019-06-13

Want to use Capacitor?

We added an optional project configured with Capacitor instead of Cordova. You are free to choose which one you want to use. Learn more about capacitor.

Improved App Shell solution 🎉

Based on the feedback from our clients, we improved and simplified the ShellProvider component. Also we added more examples to the showcase section such as retrieving dynamic data from an API. If you need more examples please contact us.

The new Shell solution relies in data stores and data sources.


  • Has a Subject (named timeline) which holds a reference to the state emitted by the DataSource.

  • It has a mechanism to append a Shell (empty model with skeleton components) before the DataSource emits the real data.

  • State management can become a though task thus why we relay heavily in rxjs to handle the states. If you don't have experience in rxjs I strongly recommend you to read

DataSource is a simple Observable to get your data.

What changed from the previous implementation of the App Shell?

  • Renamed ShellProvider class to DataStore

  • Renamed utils/shell-provider.ts to shell/data-store.ts

  • Shell configs are now located in src/assets/config and not in src/environments.

  • Page components have a more straight forward way to access route resolved data. This reduced considerable the amount of boilerplate with the new implementation of the DataStore.

  • You need to update the Services and Resolvers to match the new implementation of the DataStore.

  • This new implementation is much more flexible than the previous one enabling you much more use cases for the Shell feature. You can new examples in the Showcase section.

  • Shell elements such as Image shell and text shell are now located inside the shell folder but they remained the same without any modification.

1.0.3 - 2019-05-09

  • Refactor

    • Removed husky pre commit lint and commit messages from package.json and defined them in a separated file .huskyrc.json. If you don't want to use this you can remove it.

  • Bug fixing

    • Some users reported the following error message when building the app:Failed to construct 'HTMLElement': Please use the 'new' operator

      • We solved it doing what is explained here.

  • New features

    • Food category now shows a different details page for each restaurant.

  • Update project dependencies

1.0.2 - 2019-03-18

  • App Shell

    • Upgrade <app-text-shell> and <app-image-shell> components. Added new animations options and simplified it’s usage. (Also added new demos in the showcase section)

      • (text-shell): change 'masked' for 'gradient' animation name

      • (image-shell): now supports standalone mode (without aspect-ratio wrapper)

    • As a consequence of the previous upgrade, we updated the text-shell and image-shell references across the project (these are minimal changes).

      • (image-shell): spinner animation is now a property (animation=”spinner”) not a class (class=”add-spinner”)

  • Side Menu

    • Fix status bar issue on iPhoneX

      • src/app/app.component.html and src/app/side-menu/styles/side-menu.scss have minimal changes

  • Update npm Dependencies

    • [@angular/cli] 7.2.3 -> 7.3.6

      • ng update @angular/cli

    • [@angular/core] 7.2.2 -> 7.2.9

      • ng update @angular/core

    • [rxjs] 6.3.3 -> 6.4.0

      • ng update rxjs

    • [ionic] 4.10.2 -> 4.12.0

      • npm i -g ionic (Remember the Ionic CLI is a global npm package)

    • [@ionic/angular] 4.0.0 -> 4.1.1

      • npm install @ionic/angular --save

    • Removed deprecated deps (@ionic/ng-toolkit, @ionic/schematics-angular) in favor of @ionic/angular-toolkit (see:

      • npm uninstall @ionic/ng-toolkit

      • npm uninstall @ionic/schematics-angular

1.0.1 - 2019-02-28

  • add splash screen and icons for the PWA

  • move global app styles to separate file:src/theme/app-defaults.scss

  • fix styles for walkthrough on multiple devices (now it's responsive)

  • improved code readability by isolating usage of custom CSS variables from Ionic UI Components CSS Custom Properties. Now every stylesheet has the following structure:

  • improved code readability by extracting page, shell, responsive and platform specific styles to different files. The new structure looks like this:

  • code cleaning

  • added more examples to the showcase section

1.0.0 - 2019-02-22

  • First release 🎉