Sunday, 26 March 2017

How to implement FAB (Floating Action Buttons) in ionic 2

FAB Button (Floating Action Buttons) are buttons that float over the content in a fixed position. generally fab's are used for actions like sharing to other media's etc.

In this post i'm going to implement a fab button list containing social media. I'going  to set the button position at the bottom right corner, so that when the fab button is clicked the fab list will be displayed with an animation on top of the fab button.

Copy and Paste the following code on to your page on which you are likely to show fab button.

<ion-fab right bottom color="fabcustom">
<button ion-fab ><ion-icon name="arrow-dropup-circle"></ion-icon></button>
<ion-fab-list side="top">
<button ion-fab color="fabmini"><ion-icon name="logo-facebook"></ion-icon></button>
<button ion-fab color="fabmini"><ion-icon name="logo-twitter"></ion-icon></button>
<button ion-fab color="fabmini"><ion-icon name="logo-twitch"></ion-icon></button>
<button ion-fab color="fabmini"><ion-icon name="logo-googleplus"></ion-icon></button>
<button ion-fab color="fabmini"><ion-icon name="logo-tumblr"></ion-icon></button>

As i had said earlier, the above code will be displayed as shown below. fab will be positioned at the bottom right and the list will be displayed on top.


Styling the FAB's

Now that, we have fab working, i would like to change the color of the fab button's as i'm not a fan of ionic's primary color, and also i would like to decrease the size of fab button.
To change the color of the fab button, let's change the variables.scss file a bit.

Change the colors variable as shown below

$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
fabcustom: #38dbf5,
fabmini: #35acbf

as you can see two custom properties are added to colors variable.we will use them to change fab color.

Add newly added properites to fab button's, modified code shown below.

<ion-fab right bottom color="primary">
<button ion-fab ><ion-icon name="arrow-dropup-circle"></ion-icon></button>
<ion-fab-list side="top">
<button ion-fab ><ion-icon name="logo-facebook"></ion-icon></button>
<button ion-fab ><ion-icon name="logo-twitter"></ion-icon></button>
<button ion-fab ><ion-icon name="logo-twitch"></ion-icon></button>
<button ion-fab ><ion-icon name="logo-googleplus"></ion-icon></button>
<button ion-fab ><ion-icon name="logo-tumblr"></ion-icon></button>

Now that we have changed the color of the fab buttons, lets change the size of the fab & fab mini button's, for this also we will modify variables.scss

$fab-size : 46px !default
$fab-mini-size : 36px !default;

that's it for the styling.leave a comment for any queries.

Thursday, 23 March 2017

How to Implement Toast in Ionic 2 with ToastController

A Toast is a short notification that is commonly used on modern applications. it is commonly used to provide feedback/ indicate user  about a particular task's status or to simply display a short message.Toast can be displayed either on the top of the screen or on the bottom area.

Ionic 2 makes it easy to implement toast on your app's. follow the below steps to implement toast in your ionic 2 app.

Import ToastController from ionic-angular to the component in which you are implementing toast.

import { ToastController } from 'ionic-angular';

Now inject ToastController in your component’s class constructor

constructor(private myToastCtrl: ToastController) {}

Now that we have injected toastcontroller in to our components constructor, we can use myToastCtrl to display toast in our app. copy and paste the below code on to your component class, to display a 3 second toast on your ionic 2 app.

presentMyToast() {

let toast = this.myToastCtrl.create({
message: 'Toast Displayed Successfully! yay!!',
duration: 3000,
position: 'top'

toast.onDidDismiss(() => {
console.log('toast Dismissed');


How the Above Code Works?

when ever presentMyToast() method is called, it create's a toast with "this.myToastCtrl.create()", given it the options message, duration, position as above.

"toast.present()" display's the toast on our application where as "toast.onDidDismiss()" is called when ever the toast is dismissed.

ToastController Advanced Options

message: The message that is shown on the toast, takes string as type.

duration: Milliseconds to wait before hiding the current toast. takes number as type.

position: Where the toast should appear on the screen. default type is string.

cssClass: To add custom styling to toast. default type is string.

showCloseButton: used to show close button on toast. defaults to false,

closeButtonText: Text to display in the close button, if "showCloseButton" option is set to true .

dismissOnPageChange: Whether to close the toast when navigating to a other page/screen.