Every application starts out with what seems like a simple task: get some data, transform it, and then show it to your users. You can use a service to fetch data from your server and a pipe to transform it. However, ... Angular doesn't provide pipes for filtering or sorting lists.…
Ionic 3
Ionic 3 Component Inheritance
TypeScript enables us to extend existing classes (in order to create new ones) and Angular includes support for component inheritance. In order to minimise code duplication we can move common code into a base class. For example: import { Injector, OnInit, OnDestroy, Type } from '@angular/core'; import { Loading, LoadingController } from…
PWA Tips and Tricks
In a previous post, I showed you how to optimise your CSS delivery. In this post, I'll walk you through the Progressive Web App-related tips and tricks I've learned over the past few months. Icons Android and iOS Each platform has different requirements and it's hard to keep track of…
Optimising the performance of an Ionic PWA - Part 2
In a previous post, I showed you how to add Angular's Service Worker (NGSW) module to an Ionic project. In this post, I'll show you how to optimise your CSS delivery. Step 1 - Create a Production build We'll start by creating a production build: npm run build --prod Now…
Optimising the performance of an Ionic PWA - Part 1
Angular 5 and the Angular CLI provide improved support for Progressive Web Applications (PWA). Background I am currently working on a PWA built using version 3 of the Ionic Framework: Step 1 - Update the Angular CLI To update the global and local (devDependencies) versions of the Angular CLI we'll…
Theming your Ionic 3 App - Bespoke SVG icons
In a previous post, I showed you how to use Ionic's $colors map. In this post, I'll show you how to use SVG icons with Ionic's Tabs component, how to change a SVG icon's colour and how to provide a platform specific Back Button icon. The Tabs Component Ionic's <…