One of the most useful things about Ionic is that since the framework is web based, we can easily develop and test through the browser. However, if you do intend to build your Ionic application as a native iOS application using Cordova, you will need to test on a real device at some point. In […]
Creating a Pinterest Layout in Ionic
Ionic provides a useful Grid component that allows you to organise a layout using rows and columns. By default, if the columns contained within a row go beyond the width of the screen, they will flow automatically onto a new row. This makes it really easy to create a grid layout, like an image gallery, […]
Integrating Google AdMob Advertisements in Ionic
Advertisements, although not always the best way to monetise a venture, are one of the easiest ways to potentially earn some money from an application or website. Google’s advertisement platform allows you to easily implement advertisements without having to secure deals with advertisers yourself – you display Google’s ads and you get a percentage of […]
Using the Splash Screen Plugin with Ionic
The splash screen is the image that displays for a few seconds when your application first starts up on iOS and Android. Usually, we would be happy with the default behaviour (the splash screen will display until your application has finished loading, and then automatically disappear) but that’s not always the case. In this video […]
Asynchronous vs Synchronous: Understanding the Difference
Understanding the difference between asynchronous and synchronous code, as well as its implications, is an important topic and I have covered it a couple of times previously. Recently, I wrote an article that discussed a common asynchronous situation in Ionic that can lead to confusion. Click here to watch the video on YouTube I thought […]
Dealing with Asynchronous Code in Ionic
One of the most common things that I see people get tripped up on when learning Ionic is the difference between synchronous and asynchronous tasks and how to appropriately handle results from an asynchronous task. People may often be led to believe that something in their code or the Ionic framework is broken because they […]
Link to Pages via URLs with Deep Linking in Ionic
Primarily, Ionic is a framework for building mobile applications with web tech that look, feel, and behave like “traditional” native applications. Naturally, it makes sense for the architecture of the framework to reflect that of the mobile application world – one that doesn’t rely on the use of URLs for navigation. Unlike the Angular framework […]
What’s New in Ionic 3?
You’ve probably heard by now, but the 3.0.0 release of Ionic is now officially available. If you’re not sure what exactly that means in relation to Ionic 2, I’d recommend watching my last video on the topic. In short, Ionic 3 is just a major update to Ionic 2, it’s not a totally new framework. […]
An Introduction to ES6 Modules for Ionic Developers
Ionic applications rely heavily on the concept of modules, which is functionality that was introduced in the ES6 specification for Javascript. Technically, Ionic applications use TypeScript syntax not just plain ES6, but TypeScript is just an extension of ES6 so the concept is the same. To put everything into context, the Javascript that developers have […]
Adding Swipeable Tabs to an Ionic Application
The Ionic team have stated that their goal with Ionic was to provide a core set of components out of the box and to allow developers and the community to build out additional components. Things like buttons, toolbars, and lists are all pretty essential. Things like Tinder cards and maps are popular but are not […]
What Does Ionic 3 Mean for Ionic 2?
If you started out on Ionic 1, maybe you’re at the point now where you feel settled and comfortable after taking on the challenge of switching over to Ionic 2. If you don’t follow the particulars of versioning trends for frameworks, you might just about fall out of your seat when learning that Ionic 3 […]
[VIDEO] Basic Security for Ionic & Cordova Applications
I recently wrote an article with some basic security advice for Ionic and Cordova applications, but I thought it would be worthwhile discussing those concepts in a little more depth. In this video tutorial, I talk through the concepts that I brought up in the security article. Here’s the video:Follow @joshuamorony Video Notes You don’t […]
How to Send Data with POST Requests in Ionic 2
In the past, we have covered how to make a simple GET request to load data from a server, and for the most part, making a POST request is pretty much the same. There are a few key differences, though, including the fact that a POST request also includes a body, and there’s also a […]
An Introduction to Observables for Ionic 2
Observables are one of those new tricky things you will almost certainly run into at some point when building an application with Ionic 2. They can seem a little weird and overwhelming at first, and you might wonder “why can’t we just stick to promises?“, but they are quite beautifully implemented. At a basic level, […]
Reordering a List in Ionic 2
It’s super easy to create lists in Ionic 2, and it’s also super easy to allow a user to reorder them. With the addition of a simple attribute, you can turn your normal <ion-list> into a reorderable one. In this video tutorial, I walk through exactly how to create a reorderable list in Ionic 2. […]
How to Fix Common TypeScript Errors in Ionic 2
Early on in the development of Ionic 2, the team decided to fully embrace TypeScript over plain ES6 JavaScript. All Ionic 2 projects use TypeScript by default, and it’s quite difficult to modify the project to be rid of TypeScript. TypeScript is really just JavaScript with some added bonuses, though, so there are not really […]
Automatically Generate Splash Screens and Icons with Ionic CLI
When submitting applications to the app stores we need to supply an icon for the application that is used to display the application on the user’s home screen or applications menu, and a splash screen that is displayed when the app launches. That doesn’t sound like too much of a task, but there are a […]
Basic Security for Ionic & Cordova Applications
Security is a difficult topic, experts spend their careers learning and researching, and new threats are constantly arising. As new technology comes out, so do new threats. As developers, we may not always be able to do make our applications impervious to attacks, but it’s our responsibility to ensure we at least take some basic […]
An Introduction to Structural Directives: *ngIf & *ngFor
In this video tutorial, we cover the concept of using structural directives like *ngIf, *ngFor, and *ngSwitchCase in Ionic 2. Structural directives are an Angular concept, but we will be discussing them in the context of an Ionic application. In short, a structural directive allows us to add or remove content to our applications based […]
How to Install 3rd Party Libraries in Ionic 2
Ionic 2 allows you to do a wide range of things right out of the box, but there is likely going to come a time where you need to install some 3rd party library to add additional functionality into your applications. You may want to add Google Maps, add a charting library, add support for […]
Using Semantic CSS Styling in Ionic 2
When creating styles with CSS it is common to attach .classes and #ids to DOM elements so that we can reference them in the CSS file. We can also just use element names directly to apply styles, and there are many more selectors we can use. In this video tutorial, I walk through a semantic […]
An Explanation of Cordova Plugins for Ionic 2
One of the downsides of creating a web based mobile application is that you don’t have access to all of the device functionality that a native application does, and you can’t submit your application to app stores. Cordova solves this problem. Cordova is commonly used to wrap a web-based mobile application inside of a native […]
Getting Started with Google Maps in Ionic 2
Google Maps is one of the most used features in a mobile application, and my tutorials on Google Maps have consistently been the most popular on the site. My previous video on using Google Maps in Ionic 2 was created a long time ago, and is now outdated. So, I wanted to put together another […]
Custom Pipes in Ionic 2
Pipes are a convenient way to modify data before displaying it to users in templates. You can think of them as a pipe in a literal sense. You can push data through this pipe, something happens to it inside of the pipe, and when the data comes out the other end it looks different – […]