How to change background color of header in Ionic 4

TLDR: To change bbackground color of header in ionic 4, use color attribute as follows:

Ionic 4 has some big changes. For example, Ionic 4 framework has introduced CSS 4. One major advantage of CSS 4 is that, now we can define a variable in stylesheet and use that variable in other places of the project.  Previously, we had to depend on SASS or LESS framework to get this benefit.

Although, CSS 4 as well as other new features of Ionic 4 framework make our life easier, many developers are facing problems to deal with these changes. Because, many syntax and rules are new. For example, we don’t know how to change background color of header, where to add global styles etc. Today, we’ll focus on how to change background color of header or toolbar.

At first create a new project by running following command in command line / terminal:

When prompted, select sidebar template.

You will get a full project folder. The folder contains many files. Find out

Open the file in your preferred IDE (WebStorm) or text-editor (Sublime text). Now modify your <ion-header> code (Add color attribute in ion-toolbar tag):

Above code will change background color of header or titlebar to success color. This success color is defined in variables.scss file; You can add more color variables in variables.scss and use them.

Now go to your command line or terminal and type:

If the project compiles successfully without any error, you will see the background color of header or titlebar has been changed to success color.

You can add any other color variable in variables.scss file inside root: block and use that color here.

How to save data in Ionic Framework

Almost all mobile applications need to save different type of data in local storage or cache. It is true for Android native app, iOS native app and even hybrid cordova app. Today I’ll show you, how to save data in Ionic Framework in local storage.

It will take about 15 minutes to complete the project. After finishing the project you will be able to save and get both Json Object and plain string data from local storage.

Create a new application :

Move to your application’s root folder and add native storage cordova plugin:

Make it available in your app.module.ts file:

Create a new provider:

Open the provider and add following code:

Above provider can save and fetch both json object and primitive data types.

Create a new page named home:

Don’t forget to add page-name (home) in declarations and entryComponents arrays in app.module.ts file; Add it as root page in app.component.ts file.

Now go to your Home page (home.ts) and inject the storage dao through constructor

Now let’s save and get strings in your constructor.  For simplicity, we’ll just output the result in console.

Save String

Get String

Save Object:

Get Object:

You can remove a single key value:

Or delete all data from your application:

Now save and run the app to see the result.

How to make Http request and handle errors in Ionic Framework

In most of the cases in our mobile application we’ve to fetch data from a server. If you are using Ionic Framework, it’s not a big deal. Http plugin made it easy for us. Let’s see how to make http request in Ionic Framework using Http plugin to get data from server.

  1. Install the plugin: Run the following command in command line in your project:

    Add this module in providers array of your app.module.ts file:

Import the Http plugin:

Suppose we are going to use this plugin in HomePage.ts file. First we have to import the plugin and add it in constructor as argument:

GET request:

It is comparatively easy to make a GET request. So let’s do it first.  Just write the following code in the method of your home page:

Here you have to change the example url to your server’s url. After receiving the data from server, you can get it in server_data variable.

POST Request:

Everything is same as GET request. Here you have to add header values and post parameters before performing the request. In most of the cases, header values are same as above. Just change postParams as per your data.

Error Handling:

I was working on an ionic project for a while that sends request to server to fetch data. I faced a problem while working on it. If there is no internet connection my busy dialog keeps loading and no error message occurs. Because, the Http GET or POST methods didn’t have any handler to control the errors. After searching for a while I didn’t find any solution on internet. Finally I found it myself. Let me share it with you.

Here I’ve added error handler in subscribe section. Whenever a problem occurs, you can get the error message inside error section.

How Ionic Framework works

Ionic Framework is a mobile app development framework. The apps developed using this framework runs on android, ios and windows.  Now you may ask how it works.

The answer is very simple. It’s just an application with a web view or browser. Everything that you write in html and css are displayed in this browser from the very begining. So the user doesn’t notice the browser.

That’s the answer with a little bit more.

Now you may ask, what if I want to use native function in my app?

That’s also possible. Javascript will call the native function or method for you.

So, in short the system works as follows:




Important commands of Ionic Framework

If you have decided to learn and work with Ionic Framework, then it’s good to have important commands of it.

So we have listed those handy commands here.

Installing ionic:

Start a new project:

You can use any template name listed below as template_name :

Add android platform:

Add iOS platform:

Create a new page:

Note: Remember to add page-name in declarations and entryComponents arrays in app.module.ts file

Create a new provider:

Run in browser:

Run on android device:

Run on iOS device:

Add a cordova plugin:

Note: Here we’ve used cordova-plugin-camera as example plugin. You can use any other plugin name. Remember to add plugin-name in providers array in app.module.ts file

Remove a cordova plugin:


Advantages and disadvantages of Ionic Framework

I’m a fan of native app development. I’ve been developing both Android and iOS app for more than 5 years and still continuing.

However,  I always search for new technologies. If I get anything better, I try to adopt that.

From my this habit, I’ve found angularJS. It’s a very powerful javascript framework that is used in frontend development.

After finding this framework, a question came out of my head. Can we use it in our mobile app development.  While searching for the answer of it I found this ionic framework.

Ionic framework is a multi-platform app development framework powered by cordova. After playing with it for a while the following advantages and disadvantages are found:

Pros or advantages of Ionic Framework:

1. Easy to learn: If you have familiarity with html, css and javascript you can learn it very fast

2. Easy documentation: Ionic has very good and well documentation. Most of the things are covered in their official site. So you don’t have to move around different sites to learn.

3. Rapid development: By running some command line commands, you can create pages (e.g. ionic g page your_page_name), providers etc. When you run a command it generates all files with template codes.  So you don’t have to write everything from scratch.

4. Ionic apps run on different platforms. e.g. Android, iOS, windows etc. As a result you don’t have to write codes for each platform. It reduces development time a lot.

Cons or disadvantages of Ionic Framework:

1. Performance: Native mobile application’s performance is better than ionic app. However, in most of the cases, performance gap is not noticeable.

2. Security: If you are developing financial app e.g. app for bank, ionic framework is not recommended. It may not provide as much security as native application.

3. Limited native functionality: There may be some native functions that may be not available in ionic framework.  In that case you have to develop the plugin yourself. However, there are many plugins available to cover native functionalities.