Posts about Ionic Framework

Configurable Select Control in Ionic Navbar

August 17th 2018 Ionic Framework

There are lots of components included with Ionic framework, but not many of them can be used inside a Navbar. Fortunately, with some resourcefulness, it's easy enough to create a solution of your own by combining together multiple built-in components.

Provider Instances in Lazy Loaded Modules

July 20th 2018 Angular Ionic Framework

If you're developing applications for Ionic or Angular, you have probably already encountered static forRoot() and forChild() methods which you need to call when importing other modules, such as ngx-translate. You might not be fully aware of their significance, but when developing your own shared modules, you'll likely need to learn more about them.

Popping to Specific Ionic Page by Name

July 13th 2018 Ionic Framework

Surprisingly, there's no easy to use functionality built into Ionic to find a specific page in the navigation stack by its name and pop as many pages as necessary to reach it. Fortunately it's not too difficult to implement this on our own, thanks to the undocumented popTo method in NavController.

Returning Results from Ionic Modals

June 29th 2018 Ionic Framework

In the previous blogpost, I created a wrapper function for creating an alert in Ionic which returned a promise with user's input. Although alerts in Ionic are quite flexible, you'll eventually need to use a modal page instead of an alert. There's no reason why modals couldn't be wrapped into a function in a similar manner.

Returning Results from Ionic Alerts

June 22nd 2018 Ionic Framework

Alerts are a great way for collecting simple inputs from the user with minimum effort. The examples in the official documentation contain business logic directly in button handlers. Wouldn't it be more convenient if the code for displaying the alert could be wrapped in a separate function returning the value entered by the user?

Viewing Console Log from an Android Device

In a previous blogpost, I've described how to intercept console log output when the application is running on the device, so that it can later be exported using the standard sharing functionality. Although this is usually the most convenient approach for testers, it's an overkill during development. In such a scenario, it's more effective to look at the console output from the debugger.

Disabling Tabs in Ionic

June 8th 2018 Ionic Framework

Quick switching between tabs in Ionic can cause issues when one of the tabs requires a long initialization process every time it is displayed, as for example native Google Maps do. Before the initialization is completed, the user might already leave the tab and then navigate back to it, triggering another initialization in parallel to the first one. One way to avoid the issue is by disabling the switching between tabs until the page initialization is complete.

Fixing Ionic Generate for Old Projects

May 18th 2018 Ionic Framework

Ionic Generate command is a handy tool for creating new pages, components, providers and other file types in Ionic applications. It strongly relies on the standard Ionic project structure. Since the recommended project structure has changed quite a lot since the initial release of Ionic 2, the command might not work as expected on older projects if their structure has not been kept up-to-date.

Lazy Loading Performance in Ionic

May 11th 2018 Ionic Framework

Lazy loading was introduced in Ionic 3 to reduce application startup time. It started out as an experimental feature, but has since then become the default way for building Ionic applications. However, even with lazy loading enabled, application performance can be tweaked further with different configurations options.

Building Ionic Apps for Different Environments

May 4th 2018 Ionic Framework

In one of my previous posts, I've written about changing the config.xml file when building an app for different environments. However, sometimes that's not enough. You might want to make other changes in the application which are only possible in code, e.g. have a different tracking ID for Google Analytics or allow sharing the console log.

Lazy Loaded Modal Pages in Ionic

April 20th 2018 Ionic Framework

Modal and regular pages are very similar in Ionic. When using lazy loading their name must be passed to the controller instead of their type, otherwise they will fail to open. However, with module preloading enabled, this issue might sometimes not manifest itself.

Prepare Command Performance in Cordova 7.x

April 13th 2018 Cordova Ionic Framework

After we upgraded the Cordova version on our build server from 6.5.0 to 7.1.0, we noticed a large increase in build time for our project. By looking at detailed build times, we could attribute all of it to a single command: cordova prepare.

Ionic Global Error Handler

March 30th 2018 Ionic Framework Angular

During development, Ionic replaces the default Angular error handler with its own implementation which displays the error details in a page overlay instead of just printing them out to console. If you want to automatically report these unhandled errors to your analytics service, you can replace that error handler with your own custom one.

Angular DOM Sanitization in Ionic

March 23rd 2018 Ionic Framework Angular

Angular comes with built-in Cross Site Scripting (XSS) protection, which prevents you from using unverified dynamic values in certain contexts inside your generated page. Most of the time you shouldn't even notice this. But when you do, it's good to know how you can work around the restrictions set by this protection.

Flexbox Relative Height Issue in iOS 10

February 9th 2018 HTML 5 Ionic Framework

Flexbox greatly simplifies many HTML layout scenarios. Although it is already broadly supported in browsers, sometimes incomplete implementations can still make your life difficult. For example, in version 10 of iOS Safari, height of flexbox children isn't treated as explicitly set when defined by the parent flex container.

Showing a Part of Next Ionic Slide

February 2nd 2018 Ionic Framework

Slides is a highly configurable Ionic component, even without accessing the underlying Swiper API directly. In this post I will make it show a small part of the neighboring slide on both sides.

DismissAll Might Not Close All Loading Indicators

January 26th 2018 Ionic Framework

There are two functions for dismissing a loading indicator instance in Ionic: dismiss and dismissAll. The former will only close the specific instance, while the latter will close all currently opened instances. However, it's better to avoid dismissAll unless you really need it, because it could leave an instance open which would be closed correctly if dismiss was used instead.

Sharing Console Log from Ionic Apps

January 19th 2018 Ionic Framework Cordova JavaScript

Logging to browser console can be a useful tool for troubleshooting Ionic applications during development. Although all the logging is still done in test builds, the process of getting the log from the device is not tester-friendly. Without too much effort this experience can be improved a lot by adding an option to export the log directly from the application.

Issues with Patched Observable Operators

RxJS used to encourage monkey patching of operators and helper functions onto the Observable object. However, this has an unfortunate side effect of making the imports available everywhere. Removing an import from one file can inadvertently break code in other files. To alleviate this problem, alternative imports in the form of lettable operators are available since RxJS 5.5.

Replacing Deprecated getRootNav Call in Ionic

January 5th 2018 Ionic Framework

Ionic 3.5 introduced the concept of multiple root navigation elements to fully support SplitPane, for example. This required API changes, among others making App.getRootNav() function deprecated. However, there's still no good answer to what the value of the required parameter for the replacement function should be.

Ionic Serve for Applications with Native Plugins

December 22nd 2017 Ionic Framework Cordova

Ionic serve can be a very useful tool for tweaking the design of pages in Ionic applications. However, if your application is using native plugins, some of them might fail with Ionic serve.

Modifying Cordova config.xml at Build Time

December 15th 2017 Cordova XSLT Ionic Framework

Cordova config.xml file contains some information that might be different between the test and the production builds of your application, e.g. preference values or even the application id. This could be solved by having a separate branch in source control with these changes, but you could also modify the values just before you start the build on the build server.

Detecting Where Ionic App is Running

November 24th 2017 Ionic Framework Cordova

Ionic framework (as well as Cordova, which it is based on) do a great job at abstracting away the details about the platform that the application is currently running on. There are ways to get that information from Cordova, but it's important to understand what exactly the values returned mean.

Querying ContentChildren of Unknown Type

October 20th 2017 Angular Ionic Framework

To reference DOM elements in the component template from the component code, ViewChild and ViewChildren decorators can be used. Similarly, ContentChild and ContentChildren decorators will provide access to DOM elements in the component content. Still, I had a hard time coming up with a way to support a scenario where the component consumer should be able to tag some of the DOM elements that need to be processed by the component.

Access Parent Component from Angular Directive

October 13th 2017 Angular Ionic Framework

Angular directives are a great way to extend behavior of Angular components and HTML elements. As long as you only need a reference to the host HTML element to implement your functionality, Angular dependency injection will easily inject it as an ElementRef, along with a Renderer to modify it. If you also require a reference to the host component, it gets a little more complicated.

Hidden Advanced Features of Ionic's Slides

October 6th 2017 Ionic Framework Angular

Slides is a very flexible Ionic component for presenting multiple slides to the user who can swipe between them. However, not all its customization options are exposed as Angular Inputs and Outputs or even fully documented. To see all supported options, one can peek into the source code. The only way to learn more about them is to check the Swiper API reference, which the Slides component is based on.

Handling Hardware Back Button in Ionic

September 29th 2017 Ionic Framework Android

Ionic applications have built-in support for Android's hardware back button. For the root page it closes the application by default. There are ways to change that behavior, though.

Faster Ionic Tests Without TestBed

September 15th 2017 Ionic Framework Unit Testing Angular

Although the official Ionic templates aren't preconfigured for unit testing, there is no lack of guidance in this field. It's not all that difficult to get started with unit testing any more. However, as the number of tests in the project will start to increase, it will soon become obvious that the test are quite slow.

Writing an Ionic Native Wrapper

September 8th 2017 Ionic Framework Cordova TypeScript

Ionic Native makes it very convenient to use Cordova plugins from Ionic applications. Although Ionic Native provides an impressive collection of wrappers for many Cordova plugins, there are still Cordova plugins out there without a corresponding plugin. In such cases you will need to either use them directly without a wrapper or write your own wrapper. The latter option is much simpler than you might think.

Google Analytics Send Timeout in Ionic

August 25th 2017 Web Analytics Ionic Framework

If you want to use Google Analytics as the analytics tool for your Ionic mobile application or progressive web application (PWA), there's an Ionic Native wrapper available for the Cordova plugin with support for mobile platforms as well as the browser (web) platform. Unfortunately, it consistently threw errors for me, when I tried to send a screenview event for the entry page.

Scaling 3D Secure Iframe for Mobile

August 18th 2017 Braintree Ionic Framework

When implementing 3D Secure with Braintree for a web page, the bank's verification page is passed into the JavaScript function as an iframe element to embed into the web page. Unfortunately, the bank pages have fixed 400px width, therefore they don't fully fit on narrower mobile screens.

Roboto Font Missing Characters in Ionic

August 11th 2017 Ionic Framework Web Fonts

By default, all text in Ionic 2 uses Roboto font, which is also bundled with the framework and automatically distributed with every created application. This all sounded great, until I noticed that some characters are rendered with a different font.

Firebase Push Notifications in Ionic and Cordova

August 4th 2017 Firebase Ionic Framework Cordova

Ionic has no built-in support for Firebase Cloud Messaging (FCM), which is now also Google's official push notification infrastructure for Android. However, since Ionic is based on Cordova, it's still easy to make it work with one of the available Cordova plugins.

Breaking Changes in Android SDK 26

I have finally updated Android SDK to the latest version, because I wanted Android Studio to stop informing me about available updates on every startup. Unfortunately several breaking changes have been introduced since the version I was using before, which altogether broke my regular flow of work.

Configuring VS Code for Ionic Development

I've been doing a lot of Ionic 2 development lately in Visual Studio Code lately. The editor has great out-of-the-box support for TypeScript, HTML and CSS editing. There's also a lively ecosystem for extensions, which can improve the development experience even further. I'm going to describe my current configuration and the selection of extensions that I'm using.

Generating Swagger Client-side Code

The biggest advantage of having a formal description for a RESTful API is the ability to programmatically generate client-side code for calling the service. Unfortunately, it turned out that Swagger tooling still leaves much to be desired, at least for generating TypeScript Angular code.

Change Detection in Non-Angular Callbacks

June 9th 2017 Angular Ionic Framework

Recently, I was troubleshooting a curious bug that only happened on one page in my Ionic 2 application: new values from an HTTP request only showed on the page after a click instead of immediately. Wrapping the update code in NgZone.run() helped. However, it bothered me why this was only necessary in this single instance.

Auto Refresh with Manual Override

June 2nd 2017 ReactiveX Ionic Framework

Let's create an Ionic 2 page that auto-refreshes at regular intervals with a twist: there's also a button for manual refresh which triggers an immediate refresh. We'll implement it in two different ways: with standard JavaScript functions and with RxJS.

Dynamic Dependency Injection in Angular

I keep getting impressed by how feature-rich dependency injection in Angular is. This time I needed it to inject the appropriate implementation of a dependency based on runtime information. Of course, the scenario is well supported.

Intercept HTTP Requests in Angular and Ionic 2

Angular has an impressive dependency injection system, however some aspects could be documented better. Old blog posts explaining how things worked before the final release don't help either. Hence, it took me a while to successfully intercept HTTP requests and inject a common parameter.

Passing Data Between Tabs in Ionic 2

When using tabs in Ionic 2, each one of them contains a page that doesn't know anything about the other pages nor their common parent page hosting the tabs. This makes it challenging to switch tabs or pass data between them.

Custom Angular Validators with Dependencies

Angular has great support for validating data in forms, both template-driven and and reactive ones, built imperatively with FormGroup. It is also easy to create own custom validators. However, I did not find it obvious, how to use injected dependencies in non-directive validators for reactive forms.

Modify Protractor Configuration for Build Server

As a part of setting up the Ionic 2 project I am currently working on, I decided to also configure end-to-end testing using Protractor. I based it on the excellent Clicker demo project. It worked great for running tests during development, but lacks support for headless test execution on a build server.

Sharing Ionic 2 Code Between Projects

April 7th 2017 Ionic Framework Angular Git

Ionic 2 includes many components and native wrappers out of the box. However, you will probably want to share some of your own code between projects if you are working on more than one of them and they are at least remotely similar. Since Ionic 2 builds on top of Angular, shared modules are the right tool for the job.

Configuring Ionic 2 Web Applications

March 31st 2017 Ionic Framework Cordova

Although there's a lot of talk about Ionic 2 being suitable for creating progressive web applications (PWA), there's little guidance on how to actually configure a project to achieve this. In this post I am listing everything I changed in my project, to build a mobile web application (not yet progressive).

Unit Testing Code with Observables

Many Angular 2 and Ionic 2 APIs return RxJS observables. To unit test your code that's consuming them, you will need to create your own observable streams with test data. With this approach I wrote tests for code reacting to user's current geolocation.

Challenges of Ionic 2 Production Builds

February 17th 2017 Ionic Framework Angular TypeScript

By default, Ionic 2 produces unminified development builds. To force an optimized production build, you need to add --prod switch to ionic build or ionic run command. Since development build doesn't include Angular AoT (Ahead of Time) compilation, your production build might turn out broken even if development build of the application worked just fine.

Debug Ionic 2 Apps in VS Emulator for Android

The official Android emulator has a big disadvantage for regular users of Hyper-V: you cannot run the emulator accelerated when Hyper-V is enabled. Fortunately, there is an alternative: Visual Studio Emulator for Android, which uses Hyper-V for hardware acceleration.

Debugging Ionic 2 Apps in Chrome from Visual Studio Code

Ionic 2 is the successor to the quite popular hybrid mobile framework. It is based upon Angular 2, but unlike it, it hasn't yet reached the final release; the latest version is Release Candidate 3. This makes it still a bit rough around the edges and lacking in documentation. Debugging with source maps is one of the features, which still pose a challenge to set up for many developers.