Tag Archives: ionic 2 framework tutorial

Ionic 2 Alerts


Ionic 2 Alerts | Popup Alerts are basically used to show some specific message or ask user to make a decision or multiple decisions. Alerts can also be used to provide important information to the user. Here in this tutorial we are going to explain how you can create Alerts in Ionic 2. You can also use our online editor to edit and run the code online.


Ionic 2 Alert | Popup Example

An Alert is dialog that is used to show information or collect information from user using inputs. Alerts can also be considered as floating modal that covers a part of screen, Alerts are used for quick actions such as asking user to enter pin code sent on mobile for verification. Alerts Appear on the top of the app’s content so to interact the app’s content again it must be manually dismissed by the user.

There are following types of Alerts Available –

  • 1. Basic Alerts
  • 2. Prompt Alerts
  • 3. Confirmation Alerts
  • 4. Radio Alerts
  • 5. Checkbox Alerts

Now let us go one by one to understand the above alerts-

Basic Alerts

  • 1. HTML Part – It contains the Html Part.
  • 2. Script Part – This contains typescript code for the Alerts.

Html Part : demo.html

Now let us first create html template and add a button to call the Alert –

Ionic 2 Alerts Example: Html Part


  

Alert

Html part contains the Layout of the page and we have created a button “Show Alert” and called function showAlert() to open a basic alert, this function is defined in JavaScript Typescript – demo.ts file.

Script Part : demo.ts

Script Part contains the required resources to create Alert Box, It contains the showAlert() function which is triggered on Button click to open the Alert Box.

MatIonic 2 Alerts Example: Script Part

import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';

@Component({
  templateUrl: 'demo.html'
})
export class DemoPage {
  constructor(public atrCtrl: AlertController) {

  }
 showAlert() {
    let alert = this.atrCtrl.create({
      title: 'Basic Alert!',
      subTitle: 'You do not have enough amount in your wallet, Please add more Money!',
      buttons: ['OK']
    });
    alert.present();
  }
    
 
}          

Try it »

Import AlertsController, add in constructor as above and call create() method with parameters so main things required to create the Alert box in Ionic 2 are below-

1. importing AlertController.
2. calling it in constructor.

If you run the above example it will produce output something like this –

Ionic 2 Alerts Example

Confirm Alerts | Confirmation Box | Yes | No

Confirmation Alert is basically used to ask user whether user wants to verify some action or not. Let us create Confirmation Box

  • 1. HTML Part – It contains the Html Part.
  • 2. Script Part – It contains typescript code for the Confirmation Alerts.

Html Part : demo.html

Html template contains button to Call the Confirm Alert which will call showConfirmAlert Function –

Ionic 2 Confirm Alerts Example: Html Part


  

Confirm Alert

Script Part : demo.ts

Script Part contains the definition of function showConfirmAlert()-

Ionic 2 Confirmation box Alerts Example: Script Part

import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';

@Component({
  templateUrl: 'demo.html'
})
export class DemoPage {
  constructor(public atrCtrl: AlertController) {

  }
 showConfirmAlert() {
  let alertConfirm = this.atrCtrl.create({
    title: 'Delete Items',
    message: 'Are You Sure to delete this itemss?',
    buttons: [
      {
        text: 'No',
        role: 'cancel',
        handler: () => {
          console.log('No clicked');
        }
      },
      {
        text: 'Yess',
        handler: () => {
          console.log('Yes clicked');
        }
      }
    ]
  });
  alertConfirm.present();
}
    
 
}          

Try it »

If you run the above example it will produce output something like this –

Ionic 2 Confirmation Box Example

Prompt Alerts

Prompt Alert is used to get User Input such as Login Information – Enter Username & Password.

  • 1. HTML Part – It contains the Html Part.
  • 2. Script Part – It contains typescript code for the Prompt Alerts.

Html Part : demo.html

Html template contains button to Call the Prompt Alert which will call showPromptAlert Function –

Ionic 2 Prompt Alerts Example: Html Part


  

Prompt Alert

Script Part : demo.ts

Script Part contains the definition of function showPromptAlert()-

Ionic 2 Prompt box Alerts Example: Script Part

import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';

@Component({
  templateUrl: 'demo.html'
})
export class DemoPage {
  constructor(public atrCtrl: AlertController) {

  }
 showPromptAlert() {
  let alert = this.atrCtrl.create({
    title: 'Login',
    inputs: [
      {
        name: 'username',
        placeholder: 'Enter Username'
      },
      {
        name: 'password',
        placeholder: 'Enter Password',
        type: 'password'
      }
    ],
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: data => {
          console.log('You Clicked on Cancel');
        }
      },
      {
        text: 'Login',
        handler: data => {
          if (User.isValid(data.username, data.password)) {
            // login is valid
          } else {
            // invalid login
            return false;
          }
        }
      }
    ]
  });
  alert.present();
}
 
}          

Try it »

If you run the above example it will produce output something like this –

Ionic 2 Prompt Box Example & Demo

Radio Alerts

Radio Alert is used to show radio button options to select one from the list.

  • 1. HTML Part – It contains the Html Part.
  • 2. Script Part – It contains typescript code for the Radio Alerts.

Html Part : demo.html

Html template contains button to Call the Radio Button Alert which will call showRadioAlert Function –

Ionic 2 Radio Alerts Box Example: Html Part


  

Radio Alert Demo

Script Part : demo.ts

Script Part contains the definition of function showRadionAlert()-

Ionic 2 Radio Alert box Alerts Example: Script Part

import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';

@Component({
  templateUrl: 'demo.html'
})
export class DemoPage {
  constructor(public atrCtrl: AlertController) {

  }
 showRadioAlert() {
    let alert = this.atrCtrl.create();
    alert.setTitle('Select Gender');

    alert.addInput({
      type: 'radio',
      label: 'Male',
      value: 'Male',
      checked: true
    });
     alert.addInput({
      type: 'radio',
      label: 'Female',
      value: 'Female',
      checked: true
    });

    alert.addButton('Cancel');
    alert.addButton({
      text: 'OK',
      handler: data => {
        this.testRadioOpen = false;
        this.testRadioResult = data;
      }
    });
    alert.present();
  }
}
 
}          

Try it »

If you run the above example it will produce output something like this –

Ionic 2 Radio Alerts Example

Checkbox Alerts

Checkbox Alert provides option to select multiple items.

  • 1. HTML Part – It contains the Html Part.
  • 2. Script Part – It contains typescript code for the Checkbox Alerts.

Html Part : demo.html

Html template contains button to Call the Checkbox Button Alert which will call Checkbox Function –

Ionic 2 Checkbox Alerts Box Example: Html Part


  

Radio Checkbox Demo

Script Part : demo.ts

Script Part contains the definition of function showCheckboxAlert()-

Ionic 2 Checkbox Alert box Alerts Example: Script Part

import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';

@Component({
  templateUrl: 'demo.html'
})
export class DemoPage {
  constructor(public atrCtrl: AlertController) {

  }
  showCheckboxAlert() {
    let alert = this.atrCtrl.create();
    alert.setTitle('Which fruit do you like?');

    alert.addInput({
      type: 'checkbox',
      label: 'Mango',
      name: 'input-mango',
      id: 'input-mango',
      value: 'Mango',
      checked: true
    });

   alert.addInput({
      type: 'checkbox',
      label: 'Banana',
      name: 'input-banana',
      id: 'input-banana',
      value: 'Banana'
    });
   alert.addInput({
      type: 'checkbox',
      label: 'Apple',
      name: 'input-apple',
      id: 'input-apple',
      value: 'Apple'
    });

    alert.addButton('Cancel');
    alert.addButton({
      text: 'Okay',
      handler: data => {
        console.log('Checkbox data:', data);
      }
    });
    alert.present();
  }
 
}          

Ionic 2 Action Sheet


Ionic 2 Action Sheet: Action Sheet is dialog that allows users to choose option from the set of options. Action Sheet is placed at the bottom of the screen and it is placed at the top of the app’s content, As it is placed on the top of the content so it needs to be dismissed before interaction the app content. Here in this tutorial we are going to explain how To create Ionic 2 Action Sheet. You can also use our online tool to see the output of the example.


Ionic 2 Action Sheet Example

Action Sheet is basically created using an array of buttons and these buttons have several properties such as Text, Handler, Role, Icon etc which can be used easily to add Text, Icons etc.

ActionSheet.create(opts) Method is used to create the Action Sheet in Ionic 2 Where you can pass all the options in first Argument. Let us create a very basic Action Sheet example –

  • 1. HTML Part – It contains the Html Part.
  • 2. Script Part – This contains typescript code for the actionsheet.

Now let us go one by one to understand the Action Sheets –

Html Part : demo.html

Html Part Contains the a button which calls the function openMenu() on click event. This is the template where you want to add the action sheet button.

Ionic 2 Action sheet Example: Html Part


  

Action Sheets

Html part contains the Layout of the page and we have created a button “Show Action Sheet” and we have called a function openMenu() to show menu, this function is defined in JavaScript Typescript – demo.ts file.

Script Part : demo.ts

Script Part contains the required resources to create Action Sheet, It contains the openMenu() function which is triggered on Button click to open the Action Sheet.

MatIonic 2 Action sheet Example: Script Part

import { Component } from '@angular/core';
import {ActionSheetController} from 'ionic-angular';

@Component({
  selector: 'demo-page',
  templateUrl: 'demo.html'
})
export class DemoPage {

  constructor(public actShtCtr: ActionSheetController) {

  }    
 
  openMenu() {
    let actionSheet = this.actShtCtr.create({
      title: 'My Action Sheet',
      cssClass: 'action-sheets-basic-page',
      buttons: [
        {
          text: 'Destructive',
          role: 'destructive',
          handler: () => {
            console.log('Destructive clicked');
          }
        },{
          text: 'Archive',
          handler: () => {
            console.log('Archive clicked');
          }
        },{
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
    }
      ]
    });
    actionSheet.present();
  }
}
          

Try it »

Import ActionSheetController, add in constructor as above and call create() method with parameters. The main things required to use the ActionSheet is below-
1. importing ActionSheetController.
2. calling it in constructor.
Thus using the both steps you can create action sheet anywhere.

If you run the above example it will produce output something like this-

Ionic 2 Action Sheet Example

Download Demo

To download demo files click here – Download Ionic 2 Actionsheet

If you unzip the downloaded file, it contains folders Used to created the above demo-

  • folder app
  • folder pages

Options Available:

Instance Method

create(opts)
  • opts(ActionSheetOptions)– Action Sheet Options are title, subtitle and array of buttons. There are basically following two types of options accepted by create method-
    • 1. ActionSheet Create Options
    • 2. ActionSheet Button Options

1. ActionSheet Create Options

Following ActionSheet Create Options Are Available –

Option Type Description
title string This is used to Add title Action Sheet.
subTitle string This is used to Add sub-title for the Action Sheet.
cssClass string This is used to Add Additional classes for custom styles, You can add multiple classes separated by space.
enableBackdropDismiss boolean If the Action Sheet should close when the user taps the backdrop.
buttons array An array of buttons which will be displayed on Action Sheet.

2. ActionSheet Button Options

Following options for button are provided which can be used easily –

Option Type Description
text string Button text.
icon icon Button Icon
handler Any An express the button should evaluate
cssClass string Add Additional Classes separated by space.
role string How the button should be displayed, destructive or cancel

Learn More

Let us Learn More About Ionic 2 Action Sheet.


Ionic 2 ActionSheet With SubTitle | ICON | Css Class

Action sheet With Icons | Subtitle | Custom Css Example: Script Part

import { Component } from '@angular/core';
import { Platform, ActionSheetController} from 'ionic-angular';

@Component({
  selector: 'demo-page',
  templateUrl: 'demo.html'
})
export class DemoPage {
  constructor(public platform: Platform, public actShtCtr: ActionSheetController,public atrCtrl: AlertController) {

  }
    
 
  openMenu() {
    let actionSheet = this.actShtCtr.create({
      title: 'My Action Sheet',
      subTitle: ' Demo Subtile ',
      cssClass: 'action-sheets-basic-page',
      buttons: [
        {
          text: 'Destructive',
          role: 'destructive',
          icon: !this.platform.is('ios') ? 'trash' : null,
          cssClass:'yellow-color',
          handler: () => {
            console.log('Destructive clicked');
          }
        },{
          text: 'Archive',
          icon: !this.platform.is('ios') ? 'share' : null,
          cssClass:'blue-color',
          handler: () => {
            console.log('Archive clicked');
          }
        },{
          text: 'Cancel',
          role: 'cancel',
          icon: !this.platform.is('ios') ? 'close' : null,
          cssClass:'red-color',
          handler: () => {
            console.log('Cancel clicked');
          }
    }
      ]
    });
    actionSheet.present();
  }
}

Try it »

If you run the above it will add custom color using custom css class and we have also added icons to the buttons. The output of the above example will be something like this-

Ionic 2 ActionSheet With SubTitle | ICON | Css Class Example

Ionic 2 Tutorial


Ionic 2 Tutorial: Ionic is open source Modern front-end SDK for developing Hybrid mobile applications. Ionic’s first version was launched in 2013 with the aim to make a better for web developers to use their web skills to create mobile apps. Ionic is one of the most popular Hybrid Mobile App Development framework, more than 1.2 million apps are built on Ionic.

Ionic 2 is improved version of Ionic 1. Ionic 2 has improved performance, reduced the complexity of the code and enables you to create apps which can compete the best apps in the world.


Ionic 2 Tutorial With Example & Demo

Ionic 2 enables us to create beautiful apps with high performance which will run across each platform. Ionic 2 is different than angular 1 as it is built on Angular 2. It is easy to learn and create apps in Ionic 2.


Audience

This tutorial is made for the developers who are willing to learn the Ionic 2 with example and demo.


What You Should Know?

Before staring on Ionic 2 you should have basic knowledge of HTML, CSS And Angular 2.

Features Of Ionic 2

Ionic 2 comes with massive improvements which makes it perfect framework for cross platform Application Development. Let us have some core features of Ionic 2-

  • Amazing Performance Ionic 2 comes with amazing performance, it has improved performance than v1.-
  • Simplicity Ionic 2 is simple & easy to learn. It has simple folder structure and it is very simple to customize the components.
  • Platform Independent : Ionic 2 is platform independent – code once and deploy on any platform – android, ios.
  • Native Focused: Ionic 2 is native focused, it is easier native access such as GPS, Bluetooth, Camera etc.
  • Powerful CLI: It has powerful cli which makes development easy & fast.
  • Great Community: Ionic has powerful community, it’s forum has more then 2 Million page views every month and 3500+ apps created daily.

We are sure once you will learn Ionic 2, you will fall in love with it.