Ionic 2 components (Part 1)

Let's learn some of the useful components in ionic 2.

> Action sheet

> Badges

> Alerts

    --> Basic Alerts

    --> Prompt Alerts

    --> Confirmation Alerts

    --> Radio Alerts

    --> Checkbox Alerts

Action sheet:

    Action sheets are nothing but a dialog in which the user can choose from a set of options. It is normally shown as a popup above the page. This action sheet contains an array of buttons with properties such as

  • Text
  • Role
  • Handler

1u.PNG

 

Badges

    Badges are small component to show any small highlighted content to the user. This is used within an item.

1y.PNG

 

Alerts

  • Basic Alert:

        Lets see how to display an urgent notice immediately after an action.

1t.PNG

 

  • Prompt Alerts:

        Prompts alerts used to get any user data at any situation.

1r.PNG

 

  • Confirmation Alerts:

        Confirmation alerts is used in a situation that the user has to decide on two options.

1e.PNG

 

  • Radio alerts and Checkbox alerts:

        These alerts are similar to confirmation alerts. This use radio or checkbox component to show several options so that user can select one or many among them.

        --> Radio

1w.PNG

 

        --> Checkbox

1q.PNG

 

 

 


Sample Code:
Action Sheet:
-----------------
(.ts file)
----------
 
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ActionSheetController } from 'ionic-angular';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
  constructor(public navCtrl: NavController, public actionCtrl: ActionSheetController) {
 
  }
 
  actionSheet() {
    let action = this.actionCtrl.create({
      title: 'When is the match going to start?',
      buttons: [
        {
          text: 'Started',
          role: 'destructive',
          handler: () => {
            console.log('Started');
          }
        },
        {
          text: 'After 10 Minutes', 
          handler: () => {
            console.log('After 10 Minutes');
          }
        },
        {
          text: 'After 30 Minutes',
          handler: () => {
            console.log('After 30 Minutes');
          }
        },
        {
          text: 'Canceled',
          role: 'cancel',
          handler: () => {
            console.log('Cancelled');
          }
        }
      ]
    });
 
    action.present();
  }
 
}
 
(.html file)
-------------
 
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Ionic 2 - Components (Part 1)</ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  <button ion-button secondary (click)="actionSheet()">Action</button>
</ion-content>
 
 
Badges (.html file):
-------------------------
<ion-item>
    <ion-avatar item-start>
      <img src="https://pbs.twimg.com/profile_images/684416030874013696/hICN7ttp.jpg">
    </ion-avatar>
    <h2>Anish Nirmal</h2>
    <p>July 16, 1992</p>
    <ion-badge item-end>145 Likes</ion-badge>
  </ion-item>
 
 
Basic Alerts:
----------------
 
(.html file)
-------------
 
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Ionic 2 - Components (Part 1)</ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  <button ion-button secondary (click)="showAlert()">Action</button>
</ion-content>
 
(.ts file)
----------
 
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
 
  }
 
  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'Match results!',
      subTitle: 'Chelsea won the match!',
      buttons: ['OK']
    });
    alert.present();
  }
 
}
 
 
Prompt Alerts:
------------------
 
(.html file)
------------
 
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Ionic 2 - Components (Part 1)</ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  <button ion-button secondary (click)="showAlert()">Action</button>
</ion-content>
 
(.ts file)
----------
 
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
 
  }
 
  showAlert() {
    let prompt = this.alertCtrl.create({
      title: 'Email Subription',
      message: "Enter your email for subscription",
      inputs: [
        {
          name: 'Email Id',
          placeholder: 'email'
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: data => {
            console.log('Not intrested');
          }
        },
        {
          text: 'Subscribe',
          handler: data => {
            console.log('Thanks');
          }
        }
      ]
    });
    prompt.present();
  }
 
}
 
 
Confirmation Alerts:
--------------------------
 
(.html file)
-------------
 
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Ionic 2 - Components (Part 1)</ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  <button ion-button secondary (click)="showAlert()">Action</button>
</ion-content>
 
(.ts file)
------------
 
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
 
  }
 
  showAlert() {
    let confirm = this.alertCtrl.create({
      title: 'Confirm Subscription',
      message: 'Do you confirm the subscription?',
      buttons: [
        {
          text: 'Disagree',
          handler: () => {
            console.log('Subscription Disagreed');
          }
        },
        {
          text: 'Agree',
          handler: () => {
            console.log('Subscription Agree');
          }
        }
      ]
    });
    confirm.present();
  }
 
}
 
Radio Alerts & Checkbox Alerts:
------------------------------------------
 
(.html file)
-------------
 
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Ionic 2 - Components (Part 1)</ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  <button ion-button secondary (click)="showAlert()">Action</button>
</ion-content>
 
Radio (.ts file)
-------------------
 
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
 
  }
 
  showAlert() {
    let alert = this.alertCtrl.create();
    alert.setTitle('Your favorite team');
 
    alert.addInput({
      type: 'radio',
      label: 'Manchester United F.C.',
      value: 'Manchester United F.C.',
      checked: false
    });
 
    alert.addInput({
      type: 'radio',
      label: 'Arsenal F.C.',
      value: 'Arsenal F.C.',
      checked: false
    });
 
    alert.addInput({
      type: 'radio',
      label: 'Chelsea F.C.',
      value: 'Chelsea F.C.',
      checked: false
    });
 
    alert.addInput({
      type: 'radio',
      label: 'Real Madrid',
      value: 'Real Madrid',
      checked: false
    });
 
    alert.addButton('Cancel');
    alert.addButton({
      text: 'Submit',
      handler: data => {
        console.log(data);
      }
    });
    alert.present();
  }
 
}
 
 
Checkbox (.ts file):
-------------------------
 
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 
  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
 
  }
 
  showAlert() {
    let alert = this.alertCtrl.create();
    alert.setTitle('Your favorite team');
 
    alert.addInput({
      type: 'checkbox',
      label: 'Manchester United F.C.',
      value: 'Manchester United F.C.',
      checked: false
    });
 
    alert.addInput({
      type: 'checkbox',
      label: 'Arsenal F.C.',
      value: 'Arsenal F.C.',
      checked: false
    });
 
    alert.addInput({
      type: 'checkbox',
      label: 'Chelsea F.C.',
      value: 'Chelsea F.C.',
      checked: false
    });
 
    alert.addInput({
      type: 'checkbox',
      label: 'Real Madrid',
      value: 'Real Madrid',
      checked: false
    });
 
    alert.addButton('Cancel');
    alert.addButton({
      text: 'Submit',
      handler: data => {
        console.log(data);
      }
    });
    alert.present();
  }
 
}
Category: