ionic-angular

  • Version 3.9.10
  • Published
  • 19.6 MB
  • No dependencies
  • MIT license

Install

npm i ionic-angular
yarn add ionic-angular
pnpm add ionic-angular

Overview

A powerful framework for building mobile and progressive web apps with JavaScript and Angular

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable BLOCK_ALL

const BLOCK_ALL: BlockerOptions;

variable ConfigToken

const ConfigToken: any;

variable DeepLinkConfigToken

const DeepLinkConfigToken: any;

variable DeepLinkMetadataFactory

var DeepLinkMetadataFactory: DeepLinkMetadataFactory;

variable GESTURE_GO_BACK_SWIPE

const GESTURE_GO_BACK_SWIPE: string;

variable GESTURE_ITEM_SWIPE

const GESTURE_ITEM_SWIPE: string;

variable GESTURE_MENU_SWIPE

const GESTURE_MENU_SWIPE: string;

variable GESTURE_REFRESHER

const GESTURE_REFRESHER: string;

variable GESTURE_TOGGLE

const GESTURE_TOGGLE: string;

variable PlatformConfigToken

const PlatformConfigToken: any;

    Functions

    function IonicPage

    IonicPage: (_config?: IonicPageMetadata) => ClassDecorator;
    • IonicPage The Ionic Page handles registering and displaying specific pages based on URLs. It's used underneath NavController so it will never have to be interacted with directly. When a new page is pushed with NavController, the URL is updated to match the path to this page.

      Unlike traditional web apps, URLs don't dictate navigation in Ionic apps. Instead, URLs help us link to specific pieces of content as a breadcrumb. The current URL gets updated as we navigate, but we use the NavController push and pop, or NavPush and NavPop to move around. This makes it much easier to handle complicated nested navigation.

      We refer to our URL system as a deep link system instead of a router to encourage Ionic developers to think of URLs as a breadcrumb rather than as the source of truth in navigation. This encourages flexible navigation design and happy apps all over the world.

      The first step to setting up deep links is to add the page that should be a deep link in the IonicPageModule.forChild import of the page's module. For our examples, this will be MyPage:

      @NgModule({
      declarations: [
      MyPage
      ],
      imports: [
      IonicPageModule.forChild(MyPage)
      ],
      entryComponents: [
      MyPage
      ]
      })
      export class MyPageModule {}

      Then, add the @IonicPage decorator to the component. The most simple usage is adding an empty decorator:

      @IonicPage()
      @Component({
      templateUrl: 'main.html'
      })
      export class MyPage {}

      This will automatically create a link to the MyPage component using the same name as the class, name: 'MyPage'. The page can now be navigated to by using this name. For example:

      @Component({
      templateUrl: 'another-page.html'
      })
      export class AnotherPage {
      constructor(public navCtrl: NavController) {}
      goToMyPage() {
      // go to the MyPage component
      this.navCtrl.push('MyPage');
      }
      }

      The @IonicPage decorator accepts a DeepLinkMetadataType object. This object accepts the following properties: name, segment, defaultHistory, and priority. All of them are optional but can be used to create complex navigation links. The name and segment values must be unique.

      ### Changing Name

      As mentioned previously, the name property will be set to the class name if it isn't provided. Changing the name of the link is extremely simple. To change the name used to link to the component, simply pass it in the decorator like so:

      @IonicPage({
      name: 'my-page'
      })

      This will create a link to the MyPage component using the name 'my-page'. Similar to the previous example, the page can be navigated to by using the name:

      goToMyPage() {
      // go to the MyPage component
      this.navCtrl.push('my-page');
      }

      ### Setting URL Path

      The segment property is used to set the URL to the page. If this property isn't provided, the segment will use the value of source file name without the extension ('my-page.ts' results in segment name 'my-page'). Since components can be loaded anywhere in the app, the segment doesn't require a full URL path. When a page becomes the active page, the segment is appended to the URL.

      The segment can be changed to anything and doesn't have to match the name. For example, passing a value for name and segment:

      @IonicPage({
      name: 'my-page',
      segment: 'some-path'
      })

      When navigating to this page as the first page in the app, the URL will look something like:

      http://localhost:8101/#/some-path

      However, navigating to the page will still use the name like the previous examples do.

      ### Dynamic Links

      The segment property is useful for creating dynamic links. Sometimes the URL isn't known ahead of time, so it can be passed as a variable.

      Since passing data around is common practice in an app, it can be reflected in the app's URL by using the :param syntax. For example, set the segment in the @IonicPage decorator:

      @IonicPage({
      name: 'detail-page',
      segment: 'detail/:id'
      })

      In this case, when we push to a new instance of 'detail-page', the value of id will in the detailInfo data being passed to push will replace :id in the URL.

      Important: The property needs to be something that can be converted into a string, objects are not supported.

      For example, to push the 'detail-page' in the ListPage component, the following code could be used:

      @IonicPage({
      name: 'list'
      })
      export class ListPage {
      constructor(public navCtrl: NavController) {}
      pushPage(detailInfo) {
      // Push an `id` to the `'detail-page'`
      this.navCtrl.push('detail-page', {
      'id': detailInfo.id
      })
      }
      }

      If the value of detailInfo.id is 12, for example, the URL would end up looking like this:

      http://localhost:8101/#/list/detail/12

      Since this id will be used to pull in the data of the specific detail page, it's Important that the id is unique.

      Note: Even though the name is detail-page, the segment uses detail/:id, and the URL will use the segment.

      ### Default History

      Pages can be navigated to using deep links from anywhere in the app, but sometimes the app is launched from a URL and the page needs to have the same history as if it were navigated to from inside of the app.

      By default, the page would be navigated to as the first page in the stack with no prior history. A good example is the App Store on iOS. Clicking on a URL to an application in the App Store will load the details of the application with no back button, as if it were the first page ever viewed.

      The default history of any page can be set in the defaultHistory property. This history will only be used if the history doesn't already exist, meaning if you navigate to the page the history will be the pages that were navigated from.

      The defaultHistory property takes an array of page names. The page names are specified as statically analyzable strings (which means you must use strings and not variables or delared constants). If the parent page does not have a name specified in its IonicPage decorator its name is its class name.

      For example, setting the history of the detail page to the list page where the name is list:

      @IonicPage({
      name: 'detail-page',
      segment: 'detail/:id',
      defaultHistory: ['list']
      })

      In this example, if the app is launched at http://localhost:8101/#/detail/my-detail the displayed page will be the 'detail-page' with an id of my-detail and it will show a back button that goes back to the 'list' page.

      For a deeper example:

      @IonicPage({
      segment: 'contact-more-info',
      defaultHistory: ['ContactDetailPage', 'Contact']
      })
      ...
      export class ContactMoreInfoPage {
      ...
      }

      In this example, if the app is launched at http://localhost:8101/#/contact/contact-more-info the displayed page will be the 'ContactMoreInfoPage'. It will show a back button that will go to the 'ContactDetailPage' which will also show a back button which will go to the 'Contact' page.

      An example of an application with a set history stack is the Instagram application. Opening a link to an image on Instagram will show the details for that image with a back button to the user's profile page. There is no "right" way of setting the history for a page, it is up to the application.

      ### Priority

      The priority property is only used during preloading. By default, preloading is turned off so setting this property would do nothing. Preloading eagerly loads all deep links after the application boots instead of on demand as needed. To enable preloading, set preloadModules in the main application module config to true:

      @NgModule({
      declarations: [
      MyApp
      ],
      imports: [
      BrowserModule,
      IonicModule.forRoot(MyApp, {
      preloadModules: true
      })
      ],
      bootstrap: [IonicApp],
      entryComponents: [
      MyApp
      ]
      })
      export class AppModule { }

      If preloading is turned on, it will load the modules based on the value of priority. The following values are possible for priority: "high", "low", and "off". When there is no priority, it will be set to "low".

      All deep links with their priority set to "high" will be loaded first. Upon completion of loading the "high" priority modules, all deep links with a priority of "low" (or no priority) will be loaded. If the priority is set to "off" the link will not be preloaded. Setting the priority is as simple as passing it to the @IonicPage decorator:

      @IonicPage({
      name: 'my-page',
      priority: 'high'
      })

      We recommend setting the priority to "high" on the pages that will be viewed first when launching the application.

    function isActivatable

    isActivatable: (ele: HTMLElement) => boolean;

    function normalizeURL

    normalizeURL: (url: string) => string;
    • Rewrites an absolute URL so it works across file and http based engines

    function provideLocationStrategy

    provideLocationStrategy: (
    platformLocationStrategy: any,
    baseHref: string,
    config: Config
    ) => HashLocationStrategy | PathLocationStrategy;

    function registerModeConfigs

    registerModeConfigs: (config: Config) => () => void;

      function reorderArray

      reorderArray: (array: any[], indexes: { from: number; to: number }) => any[];

      function setupConfig

      setupConfig: (userConfig: any, plt: Platform) => Config;

      function setupEvents

      setupEvents: (plt: Platform, dom: DomController) => Events;

      function setupPlatform

      setupPlatform: (
      doc: HTMLDocument,
      platformConfigs: { [key: string]: PlatformConfig },
      zone: any
      ) => Platform;

      function setupProvideEvents

      setupProvideEvents: (plt: Platform, dom: DomController) => () => Events;

      function setupTapClick

      setupTapClick: (
      config: Config,
      plt: Platform,
      dom: DomController,
      app: App,
      gestureCtrl: GestureController
      ) => () => TapClick;

      Classes

      class ActionSheet

      class ActionSheet extends ViewController {}

      constructor

      constructor(app: App, opts: ActionSheetOptions, config: Config);

        method addButton

        addButton: (button: ActionSheetButton | string) => ActionSheet;
        • Parameter button

          Action sheet button

        method getTransitionName

        getTransitionName: (direction: string) => string;

        method present

        present: (navOptions?: NavOptions) => Promise<any>;
        • Present the action sheet instance.

          Parameter navOptions

          Nav options to go with this transition.

          Returns

          {Promise} Returns a promise which is resolved when the transition has completed.

        method setSubTitle

        setSubTitle: (subTitle: string) => ActionSheet;
        • Parameter subTitle

          Action sheet subtitle

        method setTitle

        setTitle: (title: string) => ActionSheet;
        • Parameter title

          Action sheet title

        class ActionSheetCmp

        class ActionSheetCmp {}

        constructor

        constructor(
        _viewCtrl: ViewController,
        config: Config,
        _elementRef: any,
        gestureCtrl: GestureController,
        params: NavParams,
        renderer: any
        );

          property cancelButton

          cancelButton: ActionSheetButton;

            property d

            d: ActionSheetOptions;

              property descId

              descId: string;

                property enabled

                enabled: boolean;

                  property gestureBlocker

                  gestureBlocker: BlockerDelegate;

                    property hdrId

                    hdrId: string;

                      property id

                      id: number;

                        property mode

                        mode: string;

                          method bdClick

                          bdClick: () => void;

                            method click

                            click: (button: ActionSheetButton) => void;

                              method dismiss

                              dismiss: (role: string) => Promise<any>;

                                method ionViewDidEnter

                                ionViewDidEnter: () => void;

                                  method ionViewDidLeave

                                  ionViewDidLeave: () => void;

                                    method ionViewDidLoad

                                    ionViewDidLoad: () => void;

                                      method ionViewWillEnter

                                      ionViewWillEnter: () => void;

                                        method keyUp

                                        keyUp: (ev: KeyboardEvent) => void;

                                          method ngOnDestroy

                                          ngOnDestroy: () => void;

                                            class ActionSheetController

                                            class ActionSheetController {}
                                            • ActionSheetController An Action Sheet is a dialog that lets the user choose from a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Dangerous (destructive) options are made obvious in ios mode. There are easy ways to cancel out of the action sheet, such as tapping the backdrop or hitting the escape key on desktop.

                                              An action sheet is created from an array of buttons, with each button including properties for its text, and optionally a handler and role. If a handler returns false then the action sheet will not be dismissed. An action sheet can also optionally have a title, subTitle and an icon.

                                              A button's role property can either be destructive or cancel. Buttons without a role property will have the default look for the platform. Buttons with the cancel role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the buttons array. Note: We recommend that destructive buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role.

                                              You can pass all of the action sheet's options in the first argument of the create method: ActionSheet.create(opts). Otherwise the action sheet's instance has methods to add options, like setTitle() or addButton().

                                              import { ActionSheetController } from 'ionic-angular'
                                              export class MyClass{
                                              constructor(public actionSheetCtrl: ActionSheetController) { }
                                              presentActionSheet() {
                                              const actionSheet = this.actionSheetCtrl.create({
                                              title: 'Modify your album',
                                              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();
                                              }
                                              }

                                              ActionSheet create options

                                              | Option | Type | Description | |-----------------------|------------|--------------------------------------------------------------------| | title |string | The title for the Action Sheet. | | subTitle |string | The sub-title for the Action Sheet. | | cssClass |string | Additional classes for custom styles, separated by spaces. | | enableBackdropDismiss |boolean | If the Action Sheet should close when the user taps the backdrop. | | buttons |array<any>| An array of buttons to display. |

                                              ActionSheet button options

                                              | Option | Type | Description | |----------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------| | text | string | The buttons text. | | icon | icon | The buttons icons. | | handler | any | An express the button should evaluate. | | cssClass | string | Additional classes for custom styles, separated by spaces. | | role | string | How the button should be displayed, destructive or cancel. If no role is provided, it will display the button without any additional styles. |

                                              ### Dismissing And Async Navigation

                                              After an action sheet has been dismissed, the app may need to also transition to another page depending on the handler's logic. However, because multiple transitions were fired at roughly the same time, it's difficult for the nav controller to cleanly animate multiple transitions that may have been kicked off asynchronously. This is further described in the [Nav Transition Promises](../../nav/NavController/#nav-transition-promises) section. For action sheets, this means it's best to wait for the action sheet to finish its transition out before starting a new transition on the same nav controller.

                                              In the example below, after the button has been clicked, its handler waits on async operation to complete, *then* it uses pop to navigate back a page in the same stack. The potential problem is that the async operation may have been completed before the action sheet has even finished its transition out. In this case, it's best to ensure the action sheet has finished its transition out first, *then* start the next transition.

                                              const actionSheet = this.actionSheetCtrl.create({
                                              title: 'Hello',
                                              buttons: [{
                                              text: 'Ok',
                                              handler: () => {
                                              // user has clicked the action sheet button
                                              // begin the action sheet's dimiss transition
                                              let navTransition = actionSheet.dismiss();
                                              // start some async method
                                              someAsyncOperation().then(() => {
                                              // once the async operation has completed
                                              // then run the next nav transition after the
                                              // first transition has finished animating out
                                              navTransition.then(() => {
                                              this.nav.pop();
                                              });
                                              });
                                              return false;
                                              }
                                              }]
                                              });
                                              actionSheet.present();

                                              It's important to note that the handler returns false. A feature of button handlers is that they automatically dismiss the action sheet when their button was clicked, however, we'll need more control regarding the transition. Because the handler returns false, then the action sheet does not automatically dismiss itself. Instead, you now have complete control of when the action sheet has finished transitioning, and the ability to wait for the action sheet to finish transitioning out before starting a new transition.

                                              /docs/demos/src/action-sheet/

                                              See Also

                                            constructor

                                            constructor(_app: App, config: Config);

                                              property config

                                              config: Config;

                                                method create

                                                create: (opts?: ActionSheetOptions) => ActionSheet;
                                                • Open an action sheet with a title, subTitle, and an array of buttons

                                                  Parameter opts

                                                  Action sheet options

                                                class Alert

                                                class Alert extends ViewController {}

                                                constructor

                                                constructor(app: App, opts: AlertOptions, config: Config);

                                                  method addButton

                                                  addButton: (button: AlertButton | string) => Alert;
                                                  • Parameter button

                                                    Alert button

                                                  method addInput

                                                  addInput: (input: AlertInputOptions) => Alert;
                                                  • Parameter input

                                                    Alert input

                                                  method getTransitionName

                                                  getTransitionName: (direction: string) => string;

                                                  method present

                                                  present: (navOptions?: NavOptions) => Promise<any>;
                                                  • Present the alert instance.

                                                    Parameter navOptions

                                                    Nav options to go with this transition.

                                                    Returns

                                                    {Promise} Returns a promise which is resolved when the transition has completed.

                                                  method setCssClass

                                                  setCssClass: (cssClass: string) => Alert;
                                                  • Parameter cssClass

                                                    Set the CSS class names on the alert's outer wrapper.

                                                  method setMessage

                                                  setMessage: (message: string) => Alert;
                                                  • Parameter message

                                                    Alert message content

                                                  method setMode

                                                  setMode: (mode: string) => void;
                                                  • Parameter mode

                                                    Set the mode of the alert (ios, md, wp).

                                                  method setSubTitle

                                                  setSubTitle: (subTitle: string) => Alert;
                                                  • Parameter subTitle

                                                    Alert subtitle

                                                  method setTitle

                                                  setTitle: (title: string) => Alert;
                                                  • Parameter title

                                                    Alert title

                                                  class AlertCmp

                                                  class AlertCmp {}

                                                  constructor

                                                  constructor(
                                                  _viewCtrl: ViewController,
                                                  _elementRef: any,
                                                  config: Config,
                                                  gestureCtrl: GestureController,
                                                  params: NavParams,
                                                  _renderer: any,
                                                  _plt: Platform
                                                  );

                                                    property activeId

                                                    activeId: string;

                                                      property d

                                                      d: AlertOptions;

                                                        property descId

                                                        descId: string;

                                                          property enabled

                                                          enabled: boolean;

                                                            property gestureBlocker

                                                            gestureBlocker: BlockerDelegate;

                                                              property hdrId

                                                              hdrId: string;

                                                                property id

                                                                id: number;

                                                                  property inputType

                                                                  inputType: string;

                                                                    property keyboardResizes

                                                                    keyboardResizes: boolean;

                                                                      property lastClick

                                                                      lastClick: number;

                                                                        property mode

                                                                        mode: string;

                                                                          property msgId

                                                                          msgId: string;

                                                                            property subHdrId

                                                                            subHdrId: string;

                                                                              method bdClick

                                                                              bdClick: () => void;

                                                                                method btnClick

                                                                                btnClick: (button: any) => void;

                                                                                  method cbClick

                                                                                  cbClick: (checkedInput: any) => void;

                                                                                    method dismiss

                                                                                    dismiss: (role: string) => Promise<any>;

                                                                                      method getValues

                                                                                      getValues: () => any;

                                                                                        method ionViewDidEnter

                                                                                        ionViewDidEnter: () => void;

                                                                                          method ionViewDidLeave

                                                                                          ionViewDidLeave: () => void;

                                                                                            method ionViewDidLoad

                                                                                            ionViewDidLoad: () => void;

                                                                                              method ionViewWillEnter

                                                                                              ionViewWillEnter: () => void;

                                                                                                method keyUp

                                                                                                keyUp: (ev: KeyboardEvent) => void;

                                                                                                  method ngOnDestroy

                                                                                                  ngOnDestroy: () => void;

                                                                                                    method rbClick

                                                                                                    rbClick: (checkedInput: any) => void;

                                                                                                      class AlertController

                                                                                                      class AlertController {}
                                                                                                      • AlertController An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a title, subTitle and message.

                                                                                                        You can pass all of the alert's options in the first argument of the create method: create(opts). Otherwise the alert's instance has methods to add options, such as setTitle() or addButton().

                                                                                                        ### Alert Buttons

                                                                                                        In the array of buttons, each button includes properties for its text, and optionally a handler. If a handler returns false then the alert will not automatically be dismissed when the button is clicked. All buttons will show up in the order they have been added to the buttons array, from left to right. Note: The right most button (the last one in the array) is the main button.

                                                                                                        Optionally, a role property can be added to a button, such as cancel. If a cancel role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.

                                                                                                        ### Alert Inputs

                                                                                                        Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text"" inputs can be mixed, such as url, email, text, etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.

                                                                                                        import { AlertController } from 'ionic-angular';
                                                                                                        constructor(public alertCtrl: AlertController) { }
                                                                                                        presentAlert() {
                                                                                                        const alert = this.alertCtrl.create({
                                                                                                        title: 'Low battery',
                                                                                                        subTitle: '10% of battery remaining',
                                                                                                        buttons: ['Dismiss']
                                                                                                        });
                                                                                                        alert.onDidDismiss(() => console.log('Alert was dismissed by the user'));
                                                                                                        alert.present();
                                                                                                        }
                                                                                                        presentConfirm() {
                                                                                                        const alert = this.alertCtrl.create({
                                                                                                        title: 'Confirm purchase',
                                                                                                        message: 'Do you want to buy this book?',
                                                                                                        buttons: [
                                                                                                        {
                                                                                                        text: 'Cancel',
                                                                                                        role: 'cancel',
                                                                                                        handler: () => {
                                                                                                        console.log('Cancel clicked');
                                                                                                        }
                                                                                                        },
                                                                                                        {
                                                                                                        text: 'Buy',
                                                                                                        handler: () => {
                                                                                                        console.log('Buy clicked');
                                                                                                        }
                                                                                                        }
                                                                                                        ]
                                                                                                        });
                                                                                                        alert.onDidDismiss(() => console.log('Alert was dismissed by the user'));
                                                                                                        alert.present();
                                                                                                        }
                                                                                                        presentPrompt() {
                                                                                                        const alert = this.alertCtrl.create({
                                                                                                        title: 'Login',
                                                                                                        inputs: [
                                                                                                        {
                                                                                                        name: 'username',
                                                                                                        placeholder: 'Username'
                                                                                                        },
                                                                                                        {
                                                                                                        name: 'password',
                                                                                                        placeholder: 'Password',
                                                                                                        type: 'password'
                                                                                                        }
                                                                                                        ],
                                                                                                        buttons: [
                                                                                                        {
                                                                                                        text: 'Cancel',
                                                                                                        role: 'cancel',
                                                                                                        handler: data => {
                                                                                                        console.log('Cancel clicked');
                                                                                                        }
                                                                                                        },
                                                                                                        {
                                                                                                        text: 'Login',
                                                                                                        handler: data => {
                                                                                                        if (User.isValid(data.username, data.password)) {
                                                                                                        // logged in!
                                                                                                        } else {
                                                                                                        // invalid login
                                                                                                        return false;
                                                                                                        }
                                                                                                        }
                                                                                                        }
                                                                                                        ]
                                                                                                        });
                                                                                                        alert.present();
                                                                                                        }

                                                                                                        Alert options

                                                                                                        | Property | Type | Description | |-----------------------|-----------|------------------------------------------------------------------------------| | title | string | The title for the alert. | | subTitle | string | The subtitle for the alert. | | message | string | The message for the alert. | | cssClass | string | Additional classes for custom styles, separated by spaces. | | inputs | array | An array of inputs for the alert. See input options. | | buttons | array | An array of buttons for the alert. See buttons options. | | enableBackdropDismiss | boolean | Whether the alert should be dismissed by tapping the backdrop. Default true. |

                                                                                                        Input options

                                                                                                        | Property | Type | Description | |-------------|-----------|-----------------------------------------------------------------| | type | string | The type the input should be: text, tel, number, etc. | | name | string | The name for the input. | | placeholder | string | The input's placeholder (for textual/numeric inputs) | | value | string | The input's value. | | label | string | The input's label (only for radio/checkbox inputs) | | checked | boolean | Whether or not the input is checked. | | disabled | boolean | Whether or not the input is disabled. | | id | string | The input's id. |

                                                                                                        Button options

                                                                                                        | Property | Type | Description | |----------|----------|-----------------------------------------------------------------| | text | string | The buttons displayed text. | | handler | any | Emitted when the button is pressed. | | cssClass | string | An additional CSS class for the button. | | role | string | The buttons role, null or cancel. |

                                                                                                        ### Detecting dismissal

                                                                                                        Any dismissal of the alert (including backdrop) can be detected using the method onDidDismiss(() => {}).

                                                                                                        ### Dismissing And Async Navigation

                                                                                                        After an alert has been dismissed, the app may need to also transition to another page depending on the handler's logic. However, because multiple transitions were fired at roughly the same time, it's difficult for the nav controller to cleanly animate multiple transitions that may have been kicked off asynchronously. This is further described in the [Nav Transition Promises](../../nav/NavController) section. For alerts, this means it's best to wait for the alert to finish its transition out before starting a new transition on the same nav controller.

                                                                                                        In the example below, after the alert button has been clicked, its handler waits on async operation to complete, *then* it uses pop to navigate back a page in the same stack. The potential problem is that the async operation may have been completed before the alert has even finished its transition out. In this case, it's best to ensure the alert has finished its transition out first, *then* start the next transition.

                                                                                                        const alert = this.alertCtrl.create({
                                                                                                        title: 'Hello',
                                                                                                        buttons: [{
                                                                                                        text: 'Ok',
                                                                                                        handler: () => {
                                                                                                        // user has clicked the alert button
                                                                                                        // begin the alert's dismiss transition
                                                                                                        const navTransition = alert.dismiss();
                                                                                                        // start some async method
                                                                                                        someAsyncOperation().then(() => {
                                                                                                        // once the async operation has completed
                                                                                                        // then run the next nav transition after the
                                                                                                        // first transition has finished animating out
                                                                                                        navTransition.then(() => {
                                                                                                        this.nav.pop();
                                                                                                        });
                                                                                                        });
                                                                                                        return false;
                                                                                                        }
                                                                                                        }]
                                                                                                        });
                                                                                                        alert.present();

                                                                                                        It's important to note that the handler returns false. A feature of button handlers is that they automatically dismiss the alert when their button was clicked, however, we'll need more control regarding the transition. Because the handler returns false, then the alert does not automatically dismiss itself. Instead, you now have complete control of when the alert has finished transitioning, and the ability to wait for the alert to finish transitioning out before starting a new transition.

                                                                                                        /docs/demos/src/alert/

                                                                                                      constructor

                                                                                                      constructor(_app: App, config: Config);

                                                                                                        property config

                                                                                                        config: Config;

                                                                                                          method create

                                                                                                          create: (opts?: AlertOptions) => Alert;
                                                                                                          • Display an alert with a title, inputs, and buttons

                                                                                                            Parameter opts

                                                                                                            Alert. See the table below

                                                                                                          class Animation

                                                                                                          class Animation {}

                                                                                                          constructor

                                                                                                          constructor(plt: Platform, ele?: any, opts?: AnimationOptions);

                                                                                                            property hasChildren

                                                                                                            hasChildren: boolean;

                                                                                                              property hasCompleted

                                                                                                              hasCompleted: boolean;

                                                                                                                property isPlaying

                                                                                                                isPlaying: boolean;

                                                                                                                  property opts

                                                                                                                  opts: AnimationOptions;

                                                                                                                    property parent

                                                                                                                    parent: Animation;

                                                                                                                      property plt

                                                                                                                      plt: Platform;

                                                                                                                        method add

                                                                                                                        add: (childAnimation: Animation) => Animation;
                                                                                                                        • Add a child animation to this animation.

                                                                                                                        method afterAddClass

                                                                                                                        afterAddClass: (className: string) => Animation;
                                                                                                                        • Add CSS class to this animation's elements after the animation finishes.

                                                                                                                        method afterClearStyles

                                                                                                                        afterClearStyles: (propertyNames: string[]) => Animation;
                                                                                                                        • Clear CSS inline styles from this animation's elements after the animation finishes.

                                                                                                                        method afterRemoveClass

                                                                                                                        afterRemoveClass: (className: string) => Animation;
                                                                                                                        • Remove CSS class from this animation's elements after the animation finishes.

                                                                                                                        method afterStyles

                                                                                                                        afterStyles: (styles: { [property: string]: any }) => Animation;
                                                                                                                        • Set CSS inline styles to this animation's elements after the animation finishes.

                                                                                                                        method beforeAddClass

                                                                                                                        beforeAddClass: (className: string) => Animation;
                                                                                                                        • Add CSS class to this animation's elements before the animation begins.

                                                                                                                        method beforeAddRead

                                                                                                                        beforeAddRead: (domReadFn: Function) => Animation;
                                                                                                                        • Add a function which contains DOM reads, which will run before the animation begins.

                                                                                                                        method beforeAddWrite

                                                                                                                        beforeAddWrite: (domWriteFn: Function) => Animation;
                                                                                                                        • Add a function which contains DOM writes, which will run before the animation begins.

                                                                                                                        method beforeClearStyles

                                                                                                                        beforeClearStyles: (propertyNames: string[]) => Animation;
                                                                                                                        • Clear CSS inline styles from this animation's elements before the animation begins.

                                                                                                                        method beforeRemoveClass

                                                                                                                        beforeRemoveClass: (className: string) => Animation;
                                                                                                                        • Remove CSS class from this animation's elements before the animation begins.

                                                                                                                        method beforeStyles

                                                                                                                        beforeStyles: (styles: { [property: string]: any }) => Animation;
                                                                                                                        • Set CSS inline styles to this animation's elements before the animation begins.

                                                                                                                        method destroy

                                                                                                                        destroy: () => void;
                                                                                                                        • Recursively destroy this animation and all child animations.

                                                                                                                        method duration

                                                                                                                        duration: (milliseconds: number) => Animation;
                                                                                                                        • Set the duration for this animation.

                                                                                                                        method easing

                                                                                                                        easing: (name: string) => Animation;
                                                                                                                        • Set the easing for this animation.

                                                                                                                        method easingReverse

                                                                                                                        easingReverse: (name: string) => Animation;
                                                                                                                        • Set the easing for this reversed animation.

                                                                                                                        method element

                                                                                                                        element: (ele: any) => Animation;

                                                                                                                          method from

                                                                                                                          from: (prop: string, val: any) => Animation;
                                                                                                                          • Add the "from" value for a specific property.

                                                                                                                          method fromTo

                                                                                                                          fromTo: (
                                                                                                                          prop: string,
                                                                                                                          fromVal: any,
                                                                                                                          toVal: any,
                                                                                                                          clearProperyAfterTransition?: boolean
                                                                                                                          ) => Animation;
                                                                                                                          • Shortcut to add both the "from" and "to" for the same property.

                                                                                                                          method getDuration

                                                                                                                          getDuration: (opts?: PlayOptions) => number;
                                                                                                                          • Get the duration of this animation. If this animation does not have a duration, then it'll get the duration from its parent.

                                                                                                                          method getEasing

                                                                                                                          getEasing: () => string;
                                                                                                                          • Get the easing of this animation. If this animation does not have an easing, then it'll get the easing from its parent.

                                                                                                                          method isRoot

                                                                                                                          isRoot: () => boolean;
                                                                                                                          • Returns if the animation is a root one.

                                                                                                                          method onFinish

                                                                                                                          onFinish: (
                                                                                                                          callback: Function,
                                                                                                                          onceTimeCallback?: boolean,
                                                                                                                          clearOnFinishCallacks?: boolean
                                                                                                                          ) => Animation;
                                                                                                                          • Add a callback to fire when the animation has finished.

                                                                                                                          method play

                                                                                                                          play: (opts?: PlayOptions) => void;
                                                                                                                          • Play the animation.

                                                                                                                          method progressEnd

                                                                                                                          progressEnd: (
                                                                                                                          shouldComplete: boolean,
                                                                                                                          currentStepValue: number,
                                                                                                                          dur?: number
                                                                                                                          ) => void;
                                                                                                                          • End the progress animation.

                                                                                                                          method progressStart

                                                                                                                          progressStart: () => void;
                                                                                                                          • Start the animation with a user controlled progress.

                                                                                                                          method progressStep

                                                                                                                          progressStep: (stepValue: number) => void;
                                                                                                                          • Set the progress step for this animation. progressStep() is not debounced, so it should not be called faster than 60FPS.

                                                                                                                          method reverse

                                                                                                                          reverse: (shouldReverse?: boolean) => Animation;
                                                                                                                          • Reverse the animation.

                                                                                                                          method stop

                                                                                                                          stop: (stepValue?: number) => void;
                                                                                                                          • Immediately stop at the end of the animation.

                                                                                                                          method syncPlay

                                                                                                                          syncPlay: () => void;

                                                                                                                            method to

                                                                                                                            to: (prop: string, val: any, clearProperyAfterTransition?: boolean) => Animation;
                                                                                                                            • Add the "to" value for a specific property.

                                                                                                                            class App

                                                                                                                            class App {}
                                                                                                                            • App App is a utility class used in Ionic to get information about various aspects of an app

                                                                                                                            constructor

                                                                                                                            constructor(_config: Config, _plt: Platform, _menuCtrl?: MenuController);

                                                                                                                              property viewDidEnter

                                                                                                                              viewDidEnter: any;
                                                                                                                              • Observable that emits after any view is entered in the app.

                                                                                                                                Returns

                                                                                                                                {Observable} Returns an observable

                                                                                                                              property viewDidLeave

                                                                                                                              viewDidLeave: any;
                                                                                                                              • Observable that emits after any view is exited in the app.

                                                                                                                                Returns

                                                                                                                                {Observable} Returns an observable

                                                                                                                              property viewDidLoad

                                                                                                                              viewDidLoad: any;
                                                                                                                              • Observable that emits whenever a view loads in the app.

                                                                                                                                Returns

                                                                                                                                {Observable} Returns an observable

                                                                                                                              property viewWillEnter

                                                                                                                              viewWillEnter: any;
                                                                                                                              • Observable that emits before any view is entered in the app.

                                                                                                                                Returns

                                                                                                                                {Observable} Returns an observable

                                                                                                                              property viewWillLeave

                                                                                                                              viewWillLeave: any;
                                                                                                                              • Observable that emits before any view is exited in the app.

                                                                                                                                Returns

                                                                                                                                {Observable} Returns an observable

                                                                                                                              property viewWillUnload

                                                                                                                              viewWillUnload: any;
                                                                                                                              • Observable that emits before any view unloads in the app.

                                                                                                                                Returns

                                                                                                                                {Observable} Returns an observable

                                                                                                                              method getActiveNav

                                                                                                                              getActiveNav: () => NavControllerBase;
                                                                                                                              • {NavController} Returns the first Active Nav Controller from the list. This method is deprecated

                                                                                                                              method getActiveNavContainers

                                                                                                                              getActiveNavContainers: () => NavigationContainer[];

                                                                                                                                method getActiveNavs

                                                                                                                                getActiveNavs: (rootNavId?: string) => NavControllerBase[];
                                                                                                                                • {NavController[]} Returns the active NavControllers. Using this method is preferred when we need access to the top-level navigation controller while on the outside views and handlers like registerBackButtonAction()

                                                                                                                                method getNavByIdOrName

                                                                                                                                getNavByIdOrName: (id: string) => NavigationContainer;

                                                                                                                                  method getRootNav

                                                                                                                                  getRootNav: () => any;

                                                                                                                                    method getRootNavById

                                                                                                                                    getRootNavById: (navId: string) => NavigationContainer;
                                                                                                                                    • {NavController} Returns the root NavController

                                                                                                                                    method getRootNavs

                                                                                                                                    getRootNavs: () => any[];

                                                                                                                                      method goBack

                                                                                                                                      goBack: () => Promise<any>;

                                                                                                                                      method isEnabled

                                                                                                                                      isEnabled: () => boolean;
                                                                                                                                      • Boolean if the app is actively enabled or not. {boolean}

                                                                                                                                      method isScrolling

                                                                                                                                      isScrolling: () => boolean;
                                                                                                                                      • Boolean if the app is actively scrolling or not. {boolean} returns true or false

                                                                                                                                      method navPop

                                                                                                                                      navPop: () => Promise<any>;

                                                                                                                                      method present

                                                                                                                                      present: (
                                                                                                                                      enteringView: ViewController,
                                                                                                                                      opts: NavOptions,
                                                                                                                                      appPortal?: number
                                                                                                                                      ) => Promise<any>;

                                                                                                                                      method registerRootNav

                                                                                                                                      registerRootNav: (nav: NavigationContainer) => void;

                                                                                                                                      method setElementClass

                                                                                                                                      setElementClass: (className: string, isAdd: boolean) => void;

                                                                                                                                      method setEnabled

                                                                                                                                      setEnabled: (
                                                                                                                                      isEnabled: boolean,
                                                                                                                                      duration?: number,
                                                                                                                                      minDuration?: number
                                                                                                                                      ) => void;
                                                                                                                                      • Sets if the app is currently enabled or not, meaning if it's available to accept new user commands. For example, this is set to false while views transition, a modal slides up, an action-sheet slides up, etc. After the transition completes it is set back to true.

                                                                                                                                        Parameter isEnabled

                                                                                                                                        true for enabled, false for disabled

                                                                                                                                        Parameter duration

                                                                                                                                        When isEnabled is set to false, this argument is used to set the maximum number of milliseconds that app will wait until it will automatically enable the app again. It's basically a fallback incase something goes wrong during a transition and the app wasn't re-enabled correctly.

                                                                                                                                      method setScrolling

                                                                                                                                      setScrolling: () => void;

                                                                                                                                      method setTitle

                                                                                                                                      setTitle: (val: string) => void;
                                                                                                                                      • Sets the document title.

                                                                                                                                        Parameter val

                                                                                                                                        Value to set the document title to.

                                                                                                                                      method unregisterRootNav

                                                                                                                                      unregisterRootNav: (nav: NavigationContainer) => void;

                                                                                                                                      class Avatar

                                                                                                                                      class Avatar {}
                                                                                                                                      • Avatar ionic An Avatar is a component that creates a circular image for an item. Avatars can be placed on the left or right side of an item with the item-start or item-end directive.

                                                                                                                                        See Also

                                                                                                                                      constructor

                                                                                                                                      constructor();

                                                                                                                                        class Backdrop

                                                                                                                                        class Backdrop {}

                                                                                                                                        constructor

                                                                                                                                        constructor(_elementRef: any, _renderer: any);

                                                                                                                                          method getNativeElement

                                                                                                                                          getNativeElement: () => HTMLElement;

                                                                                                                                            method setElementClass

                                                                                                                                            setElementClass: (className: string, add: boolean) => void;

                                                                                                                                              class Badge

                                                                                                                                              class Badge extends Ion {}
                                                                                                                                              • Badge ionic Badges are simple components in Ionic containing numbers or text. You can display a badge to indicate that there is new information associated with the item it is on.

                                                                                                                                                See Also

                                                                                                                                              constructor

                                                                                                                                              constructor(config: Config, elementRef: any, renderer: any);

                                                                                                                                                class BlockerDelegate

                                                                                                                                                class BlockerDelegate {}

                                                                                                                                                constructor

                                                                                                                                                constructor(
                                                                                                                                                id: number,
                                                                                                                                                controller: GestureController,
                                                                                                                                                disable: string[],
                                                                                                                                                disableScroll: boolean
                                                                                                                                                );

                                                                                                                                                  property blocked

                                                                                                                                                  blocked: boolean;

                                                                                                                                                    method block

                                                                                                                                                    block: () => void;

                                                                                                                                                      method destroy

                                                                                                                                                      destroy: () => void;

                                                                                                                                                        method unblock

                                                                                                                                                        unblock: () => void;

                                                                                                                                                          class Button

                                                                                                                                                          class Button extends Ion {}
                                                                                                                                                          • Button ionic Buttons are simple components in Ionic. They can consist of text and icons and be enhanced by a wide range of attributes.

                                                                                                                                                            <!-- Colors -->
                                                                                                                                                            <button ion-button>Default</button>
                                                                                                                                                            <button ion-button color="secondary">Secondary</button>
                                                                                                                                                            <button ion-button color="danger">Danger</button>
                                                                                                                                                            <button ion-button color="light">Light</button>
                                                                                                                                                            <button ion-button color="dark">Dark</button>
                                                                                                                                                            <!-- Shapes -->
                                                                                                                                                            <button ion-button full>Full Button</button>
                                                                                                                                                            <button ion-button block>Block Button</button>
                                                                                                                                                            <button ion-button round>Round Button</button>
                                                                                                                                                            <!-- Outline -->
                                                                                                                                                            <button ion-button full outline>Outline + Full</button>
                                                                                                                                                            <button ion-button block outline>Outline + Block</button>
                                                                                                                                                            <button ion-button round outline>Outline + Round</button>
                                                                                                                                                            <!-- Icons -->
                                                                                                                                                            <button ion-button icon-start>
                                                                                                                                                            <ion-icon name="star"></ion-icon>
                                                                                                                                                            Left Icon
                                                                                                                                                            </button>
                                                                                                                                                            <button ion-button icon-end>
                                                                                                                                                            Right Icon
                                                                                                                                                            <ion-icon name="star"></ion-icon>
                                                                                                                                                            </button>
                                                                                                                                                            <button ion-button icon-only>
                                                                                                                                                            <ion-icon name="star"></ion-icon>
                                                                                                                                                            </button>
                                                                                                                                                            <!-- Sizes -->
                                                                                                                                                            <button ion-button large>Large</button>
                                                                                                                                                            <button ion-button>Default</button>
                                                                                                                                                            <button ion-button small>Small</button>

                                                                                                                                                            <!-- Bind the color and outline inputs to an expression -->
                                                                                                                                                            <button ion-button [color]="isDanger ? 'danger' : 'primary'" [outline]="isOutline">
                                                                                                                                                            Danger (Solid)
                                                                                                                                                            </button>
                                                                                                                                                            <!-- Bind the color and round inputs to an expression -->
                                                                                                                                                            <button ion-button [color]="myColor" [round]="isRound">
                                                                                                                                                            Secondary (Round)
                                                                                                                                                            </button>
                                                                                                                                                            <!-- Bind the color and clear inputs to an expression -->
                                                                                                                                                            <button ion-button [color]="isSecondary ? 'secondary' : 'primary'" [clear]="isClear">
                                                                                                                                                            Primary (Clear)
                                                                                                                                                            </button>
                                                                                                                                                            <!-- Bind the color, outline and round inputs to an expression -->
                                                                                                                                                            <button ion-button [color]="myColor2" [outline]="isOutline" [round]="isRound">
                                                                                                                                                            Dark (Solid + Round)
                                                                                                                                                            </button>
                                                                                                                                                            <!-- Bind the click event to a method -->
                                                                                                                                                            <button ion-button (click)="logEvent($event)">
                                                                                                                                                            Click me!
                                                                                                                                                            </button>

                                                                                                                                                            @Component({
                                                                                                                                                            templateUrl: 'main.html'
                                                                                                                                                            })
                                                                                                                                                            class E2EPage {
                                                                                                                                                            isDanger: boolean = true;
                                                                                                                                                            isSecondary: boolean = false;
                                                                                                                                                            isRound: boolean = true;
                                                                                                                                                            isOutline: boolean = false;
                                                                                                                                                            isClear: boolean = true;
                                                                                                                                                            myColor: string = 'secondary';
                                                                                                                                                            myColor2: string = 'dark';
                                                                                                                                                            logEvent(event) {
                                                                                                                                                            console.log(event)
                                                                                                                                                            }
                                                                                                                                                            }

                                                                                                                                                            /docs/demos/src/button/

                                                                                                                                                            See Also

                                                                                                                                                          constructor

                                                                                                                                                          constructor(ionButton: string, config: Config, elementRef: any, renderer: any);

                                                                                                                                                            property block

                                                                                                                                                            block: boolean;
                                                                                                                                                            • {boolean} If true, activates a button style that fills the available width.

                                                                                                                                                            property clear

                                                                                                                                                            clear: boolean;
                                                                                                                                                            • {boolean} If true, activates a transparent button style without a border.

                                                                                                                                                            property color

                                                                                                                                                            color: string;
                                                                                                                                                            • {string} The color to use from your Sass $colors map. Default options are: "primary", "secondary", "danger", "light", and "dark". For more information, see [Theming your App](/docs/theming/theming-your-app).

                                                                                                                                                            property default

                                                                                                                                                            default: boolean;
                                                                                                                                                            • {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item.

                                                                                                                                                            property full

                                                                                                                                                            full: boolean;
                                                                                                                                                            • {boolean} If true, activates a button style that fills the available width without a left and right border.

                                                                                                                                                            property large

                                                                                                                                                            large: boolean;
                                                                                                                                                            • {boolean} If true, activates the large button size.

                                                                                                                                                            property mode

                                                                                                                                                            mode: string;
                                                                                                                                                            • {string} The mode determines which platform styles to use. Possible values are: "ios", "md", or "wp". For more information, see [Platform Styles](/docs/theming/platform-specific-styles).

                                                                                                                                                            property outline

                                                                                                                                                            outline: boolean;
                                                                                                                                                            • {boolean} If true, activates a transparent button style with a border.

                                                                                                                                                            property round

                                                                                                                                                            round: boolean;
                                                                                                                                                            • {boolean} If true, activates a button with rounded corners.

                                                                                                                                                            property small

                                                                                                                                                            small: boolean;
                                                                                                                                                            • {boolean} If true, activates the small button size.

                                                                                                                                                            property solid

                                                                                                                                                            solid: boolean;
                                                                                                                                                            • {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar.

                                                                                                                                                            property strong

                                                                                                                                                            strong: boolean;
                                                                                                                                                            • {boolean} If true, activates a button with a heavier font weight.

                                                                                                                                                            method ngAfterContentInit

                                                                                                                                                            ngAfterContentInit: () => void;

                                                                                                                                                            method setRole

                                                                                                                                                            setRole: (val: string) => void;

                                                                                                                                                            class Card

                                                                                                                                                            class Card extends Ion {}

                                                                                                                                                            constructor

                                                                                                                                                            constructor(config: Config, elementRef: any, renderer: any);

                                                                                                                                                              class CardContent

                                                                                                                                                              class CardContent extends Ion {}

                                                                                                                                                              constructor

                                                                                                                                                              constructor(config: Config, elementRef: any, renderer: any);

                                                                                                                                                                class CardHeader

                                                                                                                                                                class CardHeader extends Ion {}

                                                                                                                                                                constructor

                                                                                                                                                                constructor(config: Config, elementRef: any, renderer: any);

                                                                                                                                                                  class CardTitle

                                                                                                                                                                  class CardTitle extends Ion {}

                                                                                                                                                                  constructor

                                                                                                                                                                  constructor(config: Config, elementRef: any, renderer: any);

                                                                                                                                                                    class Checkbox

                                                                                                                                                                    class Checkbox extends BaseInput<boolean> implements IonicTapInput, OnDestroy {}
                                                                                                                                                                    • Checkbox ionic

                                                                                                                                                                      The Checkbox is a simple component styled based on the mode. It can be placed in an ion-item or used as a stand-alone checkbox.

                                                                                                                                                                      See the [Angular Docs](https://angular.io/docs/ts/latest/guide/forms.html) for more info on forms and inputs.

                                                                                                                                                                      <ion-list>
                                                                                                                                                                      <ion-item>
                                                                                                                                                                      <ion-label>Pepperoni</ion-label>
                                                                                                                                                                      <ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
                                                                                                                                                                      </ion-item>
                                                                                                                                                                      <ion-item>
                                                                                                                                                                      <ion-label>Sausage</ion-label>
                                                                                                                                                                      <ion-checkbox [(ngModel)]="sausage" disabled="true"></ion-checkbox>
                                                                                                                                                                      </ion-item>
                                                                                                                                                                      <ion-item>
                                                                                                                                                                      <ion-label>Mushrooms</ion-label>
                                                                                                                                                                      <ion-checkbox [(ngModel)]="mushrooms"></ion-checkbox>
                                                                                                                                                                      </ion-item>
                                                                                                                                                                      </ion-list>

                                                                                                                                                                      <!-- Call function when state changes -->
                                                                                                                                                                      <ion-list>
                                                                                                                                                                      <ion-item>
                                                                                                                                                                      <ion-label>Cucumber</ion-label>
                                                                                                                                                                      <ion-checkbox [(ngModel)]="cucumber" (ionChange)="updateCucumber()"></ion-checkbox>
                                                                                                                                                                      </ion-item>
                                                                                                                                                                      </ion-list>

                                                                                                                                                                      @Component({
                                                                                                                                                                      templateUrl: 'main.html'
                                                                                                                                                                      })
                                                                                                                                                                      class SaladPage {
                                                                                                                                                                      cucumber: boolean;
                                                                                                                                                                      updateCucumber() {
                                                                                                                                                                      console.log('Cucumbers new state:' + this.cucumber);
                                                                                                                                                                      }
                                                                                                                                                                      }

                                                                                                                                                                      /docs/demos/src/checkbox/

                                                                                                                                                                      See Also

                                                                                                                                                                    constructor

                                                                                                                                                                    constructor(
                                                                                                                                                                    config: Config,
                                                                                                                                                                    form: Form,
                                                                                                                                                                    item: Item,
                                                                                                                                                                    elementRef: any,
                                                                                                                                                                    renderer: any
                                                                                                                                                                    );

                                                                                                                                                                      property checked

                                                                                                                                                                      checked: boolean;
                                                                                                                                                                      • {boolean} If true, the element is selected.

                                                                                                                                                                      class Chip

                                                                                                                                                                      class Chip extends Ion {}
                                                                                                                                                                      • Chip ionic Chips represent complex entities in small blocks, such as a contact.

                                                                                                                                                                        <ion-chip>
                                                                                                                                                                        <ion-label>Default</ion-label>
                                                                                                                                                                        </ion-chip>
                                                                                                                                                                        <ion-chip>
                                                                                                                                                                        <ion-label color="secondary">Secondary Label</ion-label>
                                                                                                                                                                        </ion-chip>
                                                                                                                                                                        <ion-chip color="secondary">
                                                                                                                                                                        <ion-label color="dark">Secondary w/ Dark label</ion-label>
                                                                                                                                                                        </ion-chip>
                                                                                                                                                                        <ion-chip color="danger">
                                                                                                                                                                        <ion-label>Danger</ion-label>
                                                                                                                                                                        </ion-chip>
                                                                                                                                                                        <ion-chip>
                                                                                                                                                                        <ion-icon name="pin"></ion-icon>
                                                                                                                                                                        <ion-label>Default</ion-label>
                                                                                                                                                                        </ion-chip>
                                                                                                                                                                        <ion-chip>
                                                                                                                                                                        <ion-icon name="heart" color="dark"></ion-icon>
                                                                                                                                                                        <ion-label>Default</ion-label>
                                                                                                                                                                        </ion-chip>
                                                                                                                                                                        <ion-chip>
                                                                                                                                                                        <ion-avatar>
                                                                                                                                                                        <img src="assets/img/my-img.png">
                                                                                                                                                                        </ion-avatar>
                                                                                                                                                                        <ion-label>Default</ion-label>
                                                                                                                                                                        </ion-chip>

                                                                                                                                                                        <ion-chip #chip1>
                                                                                                                                                                        <ion-label>Default</ion-label>
                                                                                                                                                                        <button ion-button clear color="light" (click)="delete(chip1)">
                                                                                                                                                                        <ion-icon name="close-circle"></ion-icon>
                                                                                                                                                                        </button>
                                                                                                                                                                        </ion-chip>
                                                                                                                                                                        <ion-chip #chip2>
                                                                                                                                                                        <ion-icon name="pin" color="primary"></ion-icon>
                                                                                                                                                                        <ion-label>With Icon</ion-label>
                                                                                                                                                                        <button ion-button (click)="delete(chip2)">
                                                                                                                                                                        <ion-icon name="close"></ion-icon>
                                                                                                                                                                        </button>
                                                                                                                                                                        </ion-chip>
                                                                                                                                                                        <ion-chip #chip3>
                                                                                                                                                                        <ion-avatar>
                                                                                                                                                                        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
                                                                                                                                                                        </ion-avatar>
                                                                                                                                                                        <ion-label>With Avatar</ion-label>
                                                                                                                                                                        <button ion-button clear color="dark" (click)="delete(chip3)">
                                                                                                                                                                        <ion-icon name="close-circle"></ion-icon>
                                                                                                                                                                        </button>
                                                                                                                                                                        </ion-chip>

                                                                                                                                                                        @Component({
                                                                                                                                                                        templateUrl: 'main.html'
                                                                                                                                                                        })
                                                                                                                                                                        class E2EPage {
                                                                                                                                                                        delete(chip: Element) {
                                                                                                                                                                        chip.remove();
                                                                                                                                                                        }
                                                                                                                                                                        }

                                                                                                                                                                        /docs/demos/src/chip/

                                                                                                                                                                      constructor

                                                                                                                                                                      constructor(config: Config, elementRef: any, renderer: any);

                                                                                                                                                                        class Col

                                                                                                                                                                        class Col {}
                                                                                                                                                                        • Col ionic

                                                                                                                                                                          Columns are cellular components of the [grid](../Grid) system and go inside of a [row](../Row). They will expand to fill their row. All content within a grid should go inside of a column.

                                                                                                                                                                          ## Column attributes

                                                                                                                                                                          By default, columns will stretch to fill the entire height of the row. There are several attributes that can be added to a column to customize this behavior.

                                                                                                                                                                          | Property | Description | |-----------------------|-------------------------------------------------------------------------------------------------------------| | align-self-start | Adds align-self: flex-start. The column will be vertically aligned at the top. | | align-self-center | Adds align-self: center. The column will be vertically aligned in the center. | | align-self-end | Adds align-self: flex-end. The column will be vertically aligned at the bottom. | | align-self-stretch | Adds align-self: stretch. The column will be stretched to take up the entire height of the row. | | align-self-baseline | Adds align-self: baseline. The column will be vertically aligned at its baseline. |

                                                                                                                                                                        class Config

                                                                                                                                                                        class Config {}
                                                                                                                                                                        • Config /docs/demos/src/config/ The Config lets you configure your entire app or specific platforms. You can set the tab placement, icon mode, animations, and more here.

                                                                                                                                                                          import { IonicApp, IonicModule } from 'ionic-angular';
                                                                                                                                                                          @NgModule({
                                                                                                                                                                          declarations: [ MyApp ],
                                                                                                                                                                          imports: [
                                                                                                                                                                          BrowserModule,
                                                                                                                                                                          IonicModule.forRoot(MyApp, {
                                                                                                                                                                          backButtonText: 'Go Back',
                                                                                                                                                                          iconMode: 'ios',
                                                                                                                                                                          modalEnter: 'modal-slide-in',
                                                                                                                                                                          modalLeave: 'modal-slide-out',
                                                                                                                                                                          tabsPlacement: 'bottom',
                                                                                                                                                                          pageTransition: 'ios-transition'
                                                                                                                                                                          }, {}
                                                                                                                                                                          )],
                                                                                                                                                                          bootstrap: [IonicApp],
                                                                                                                                                                          entryComponents: [ MyApp ],
                                                                                                                                                                          providers: []
                                                                                                                                                                          })

                                                                                                                                                                          Config can be overwritten at multiple levels allowing for more granular configuration. Below is an example where an app can override any setting we want based on a platform.

                                                                                                                                                                          import { IonicModule } from 'ionic-angular';
                                                                                                                                                                          @NgModule({
                                                                                                                                                                          ...
                                                                                                                                                                          imports: [
                                                                                                                                                                          BrowserModule,
                                                                                                                                                                          IonicModule.forRoot(MyApp, {
                                                                                                                                                                          tabsPlacement: 'bottom',
                                                                                                                                                                          platforms: {
                                                                                                                                                                          ios: {
                                                                                                                                                                          tabsPlacement: 'top',
                                                                                                                                                                          }
                                                                                                                                                                          }
                                                                                                                                                                          }, {}
                                                                                                                                                                          )],
                                                                                                                                                                          ...
                                                                                                                                                                          })

                                                                                                                                                                          We could also configure these values at a component level. Take tabsPlacement, we can configure this as a property on our ion-tabs.

                                                                                                                                                                          <ion-tabs tabsPlacement="top">
                                                                                                                                                                          <ion-tab tabTitle="Dash" tabIcon="pulse" [root]="tabRoot"></ion-tab>
                                                                                                                                                                          </ion-tabs>

                                                                                                                                                                          The last way we could configure is through URL query strings. This is useful for testing while in the browser. Simply add ?ionic<PROPERTYNAME>=<value> to the url.

                                                                                                                                                                          http://localhost:8100/?ionicTabsPlacement=bottom

                                                                                                                                                                          Any value can be added to config, and looked up at a later in any component.

                                                                                                                                                                          config.set('ios', 'favoriteColor', 'green');
                                                                                                                                                                          // from any page in your app:
                                                                                                                                                                          config.get('favoriteColor'); // 'green' when iOS

                                                                                                                                                                          A config value can come from anywhere and be anything, but there are default values for each mode. The [theming](../../../theming/platform-specific-styles/) documentation has a chart of the default mode configuration. The following chart displays each property with a description of what it controls.

                                                                                                                                                                          | Config Property | Type | Details | |--------------------------|---------------------|--------------------------------------------------------------------------------------------------------------------------------------------------| | activator | string | Used for buttons, changes the effect of pressing on a button. Available options: "ripple", "highlight". | | actionSheetEnter | string | The name of the transition to use while an action sheet is presented. | | actionSheetLeave | string | The name of the transition to use while an action sheet is dismissed. | | alertEnter | string | The name of the transition to use while an alert is presented. | | alertLeave | string | The name of the transition to use while an alert is dismissed. | | backButtonText | string | The text to display by the back button icon in the navbar. | | backButtonIcon | string | The icon to use as the back button icon. | | iconMode | string | The mode to use for all icons throughout the application. Available options: "ios", "md" | | locationStrategy | string | Set to 'path' to remove hashbangs when using Deeplinking. | | loadingEnter | string | The name of the transition to use while a loading indicator is presented. | | loadingLeave | string | The name of the transition to use while a loading indicator is dismissed. | | menuType | string | Type of menu to display. Available options: "overlay", "reveal", "push". | | modalEnter | string | The name of the transition to use while a modal is presented. | | modalLeave | string | The name of the transition to use while a modal is dismiss. | | mode | string | The mode to use throughout the application. | | pageTransition | string | The name of the transition to use while changing pages. Available options: "ios-transition", "md-transition", "wp-transition". | | pickerEnter | string | The name of the transition to use while a picker is presented. | | pickerLeave | string | The name of the transition to use while a picker is dismissed. | | popoverEnter | string | The name of the transition to use while a popover is presented. | | popoverLeave | string | The name of the transition to use while a popover is dismissed. | scrollAssist | boolean | Used to avoid the input to be hidden by the keyboard if it's near the bottom of the page. | scrollPadding | boolean | Used to remove the extra padding on ion-content when keyboard is displayed. | spinner | string | The default spinner to use when a name is not defined. | | statusbarPadding | boolean | Whether to hide extra padding for statusbar. | | swipeBackEnabled | boolean | Whether native iOS swipe to go back functionality is enabled. | | tabsHighlight | boolean | Whether to show a highlight line under the tab when it is selected. | | tabsLayout | string | The layout to use for all tabs. Available options: "icon-top", "icon-start", "icon-end", "icon-bottom", "icon-hide", "title-hide". | | tabsPlacement | string | The position of the tabs relative to the content. Available options: "top", "bottom" | | tabsHideOnSubPages | boolean | Whether to hide the tabs on child pages or not. If true it will not show the tabs on child pages. | | toastEnter | string | The name of the transition to use while a toast is presented. | | toastLeave | string | The name of the transition to use while a toast is dismissed. |

                                                                                                                                                                        property plt

                                                                                                                                                                        plt: Platform;

                                                                                                                                                                        method get

                                                                                                                                                                        get: (key: string, fallbackValue?: any) => any;
                                                                                                                                                                        • get Returns a single config value, given a key.

                                                                                                                                                                          Parameter key

                                                                                                                                                                          the key for the config value

                                                                                                                                                                          Parameter fallbackValue

                                                                                                                                                                          a fallback value to use when the config value was not found, or is config value is null. Fallback value defaults to null.

                                                                                                                                                                        method getBoolean

                                                                                                                                                                        getBoolean: (key: string, fallbackValue?: boolean) => boolean;
                                                                                                                                                                        • getBoolean Same as get(), however always returns a boolean value. If the value from get() is null, then it'll return the fallbackValue which defaults to false. Otherwise, getBoolean() will return if the config value is truthy or not. It also returns true if the config value was the string value "true".

                                                                                                                                                                          Parameter key

                                                                                                                                                                          the key for the config value

                                                                                                                                                                          Parameter fallbackValue

                                                                                                                                                                          a fallback value to use when the config value was null. Fallback value defaults to false.

                                                                                                                                                                        method getModeConfig

                                                                                                                                                                        getModeConfig: (modeName: string) => any;

                                                                                                                                                                        method getNumber

                                                                                                                                                                        getNumber: (key: string, fallbackValue?: number) => number;
                                                                                                                                                                        • getNumber Same as get(), however always returns a number value. Uses parseFloat() on the value received from get(). If the result from the parse is NaN, then it will return the value passed to fallbackValue. If no fallback value was provided then it'll default to returning NaN when the result is not a valid number.

                                                                                                                                                                          Parameter key

                                                                                                                                                                          the key for the config value

                                                                                                                                                                          Parameter fallbackValue

                                                                                                                                                                          a fallback value to use when the config value turned out to be NaN. Fallback value defaults to NaN.

                                                                                                                                                                        method getTransition

                                                                                                                                                                        getTransition: (trnsName: string) => any;

                                                                                                                                                                        method init

                                                                                                                                                                        init: (config: any, plt: Platform) => void;

                                                                                                                                                                        method parseNumber

                                                                                                                                                                        parseNumber: (value: string, fallbackValue?: number) => number;

                                                                                                                                                                          method set

                                                                                                                                                                          set: (...args: any[]) => this;
                                                                                                                                                                          • set Sets a single config value.

                                                                                                                                                                            Parameter platform

                                                                                                                                                                            The platform (either 'ios' or 'android') that the config value should apply to. Leaving this blank will apply the config value to all platforms.

                                                                                                                                                                            Parameter key

                                                                                                                                                                            The key used to look up the value at a later point in time.

                                                                                                                                                                            Parameter value

                                                                                                                                                                            The config value being stored.

                                                                                                                                                                          method setModeConfig

                                                                                                                                                                          setModeConfig: (modeName: string, modeConfig: any) => void;

                                                                                                                                                                          method settings

                                                                                                                                                                          settings: (arg0?: any, arg1?: any) => any;
                                                                                                                                                                          • settings()

                                                                                                                                                                          method setTransition

                                                                                                                                                                          setTransition: (trnsName: string, trnsClass: any) => void;

                                                                                                                                                                          class Content

                                                                                                                                                                          class Content extends Ion implements OnDestroy, AfterViewInit, IContent {}
                                                                                                                                                                          • Content The Content component provides an easy to use content area with some useful methods to control the scrollable area. There should only be one content in a single view component. If additional scrollable elements are needed, use [ionScroll](../../scroll/Scroll).

                                                                                                                                                                            The content area can also implement pull-to-refresh with the [Refresher](../../refresher/Refresher) component.

                                                                                                                                                                            <ion-content>
                                                                                                                                                                            Add your content here!
                                                                                                                                                                            </ion-content>

                                                                                                                                                                            To get a reference to the content component from a Page's logic, you can use Angular's @ViewChild annotation:

                                                                                                                                                                            import { Component, ViewChild } from '@angular/core';
                                                                                                                                                                            import { Content } from 'ionic-angular';
                                                                                                                                                                            @Component({...})
                                                                                                                                                                            export class MyPage{
                                                                                                                                                                            @ViewChild(Content) content: Content;
                                                                                                                                                                            scrollToTop() {
                                                                                                                                                                            this.content.scrollToTop();
                                                                                                                                                                            }
                                                                                                                                                                            }

                                                                                                                                                                            ### Scroll Events

                                                                                                                                                                            Scroll events happen outside of Angular's Zones. This is for performance reasons. So if you're trying to bind a value to any scroll event, it will need to be wrapped in a zone.run()

                                                                                                                                                                            import { Component, NgZone } from '@angular/core';
                                                                                                                                                                            @Component({
                                                                                                                                                                            template: `
                                                                                                                                                                            <ion-header>
                                                                                                                                                                            <ion-navbar>
                                                                                                                                                                            <ion-title>{{scrollAmount}}</ion-title>
                                                                                                                                                                            </ion-navbar>
                                                                                                                                                                            </ion-header>
                                                                                                                                                                            <ion-content (ionScroll)="scrollHandler($event)">
                                                                                                                                                                            <p> Some realllllllly long content </p>
                                                                                                                                                                            </ion-content>
                                                                                                                                                                            `})
                                                                                                                                                                            class E2EPage {
                                                                                                                                                                            public scrollAmount = 0;
                                                                                                                                                                            constructor( public zone: NgZone){}
                                                                                                                                                                            scrollHandler(event) {
                                                                                                                                                                            console.log(`ScrollEvent: ${event}`)
                                                                                                                                                                            this.zone.run(()=>{
                                                                                                                                                                            // since scrollAmount is data-binded,
                                                                                                                                                                            // the update needs to happen in zone
                                                                                                                                                                            this.scrollAmount++
                                                                                                                                                                            })
                                                                                                                                                                            }
                                                                                                                                                                            }

                                                                                                                                                                            This goes for any scroll event, not just ionScroll.

                                                                                                                                                                            ### Resizing the content

                                                                                                                                                                            If the height of ion-header, ion-footer or ion-tabbar changes dynamically, content.resize() has to be called in order to update the layout of Content.

                                                                                                                                                                            @Component({
                                                                                                                                                                            template: `
                                                                                                                                                                            <ion-header>
                                                                                                                                                                            <ion-navbar>
                                                                                                                                                                            <ion-title>Main Navbar</ion-title>
                                                                                                                                                                            </ion-navbar>
                                                                                                                                                                            <ion-toolbar *ngIf="showToolbar">
                                                                                                                                                                            <ion-title>Dynamic Toolbar</ion-title>
                                                                                                                                                                            </ion-toolbar>
                                                                                                                                                                            </ion-header>
                                                                                                                                                                            <ion-content>
                                                                                                                                                                            <button ion-button (click)="toggleToolbar()">Toggle Toolbar</button>
                                                                                                                                                                            </ion-content>
                                                                                                                                                                            `})
                                                                                                                                                                            class E2EPage {
                                                                                                                                                                            @ViewChild(Content) content: Content;
                                                                                                                                                                            showToolbar: boolean = false;
                                                                                                                                                                            toggleToolbar() {
                                                                                                                                                                            this.showToolbar = !this.showToolbar;
                                                                                                                                                                            this.content.resize();
                                                                                                                                                                            }
                                                                                                                                                                            }

                                                                                                                                                                            Scroll to a specific position

                                                                                                                                                                            import { Component, ViewChild } from '@angular/core';
                                                                                                                                                                            import { Content } from 'ionic-angular';
                                                                                                                                                                            @Component({
                                                                                                                                                                            template: `<ion-content>
                                                                                                                                                                            <button ion-button (click)="scrollTo()">Down 500px</button>
                                                                                                                                                                            </ion-content>`
                                                                                                                                                                            )}
                                                                                                                                                                            export class MyPage{
                                                                                                                                                                            @ViewChild(Content) content: Content;
                                                                                                                                                                            scrollTo() {
                                                                                                                                                                            // set the scrollLeft to 0px, and scrollTop to 500px
                                                                                                                                                                            // the scroll duration should take 200ms
                                                                                                                                                                            this.content.scrollTo(0, 500, 200);
                                                                                                                                                                            }
                                                                                                                                                                            }

                                                                                                                                                                          constructor

                                                                                                                                                                          constructor(
                                                                                                                                                                          config: Config,
                                                                                                                                                                          _plt: Platform,
                                                                                                                                                                          _dom: DomController,
                                                                                                                                                                          elementRef: any,
                                                                                                                                                                          renderer: any,
                                                                                                                                                                          _app: App,
                                                                                                                                                                          _keyboard: Keyboard,
                                                                                                                                                                          _zone: any,
                                                                                                                                                                          viewCtrl: ViewController,
                                                                                                                                                                          navCtrl: NavController
                                                                                                                                                                          );

                                                                                                                                                                            property contentBottom

                                                                                                                                                                            contentBottom: number;
                                                                                                                                                                            • A number representing how many pixels the bottom of the content has been adjusted, which could be by either padding or margin. This adjustment is to account for the space needed for the footer.

                                                                                                                                                                              {number}

                                                                                                                                                                            property contentHeight

                                                                                                                                                                            readonly contentHeight: number;
                                                                                                                                                                            • Content height of the viewable area. This does not include content which is outside the overflow area, or content area which is under headers and footers. Read-only.

                                                                                                                                                                              {number}

                                                                                                                                                                            property contentTop

                                                                                                                                                                            contentTop: number;
                                                                                                                                                                            • A number representing how many pixels the top of the content has been adjusted, which could be by either padding or margin. This adjustment is to account for the space needed for the header.

                                                                                                                                                                              {number}

                                                                                                                                                                            property contentWidth

                                                                                                                                                                            readonly contentWidth: number;
                                                                                                                                                                            • Content width including content which is not visible on the screen due to overflow. Read-only.

                                                                                                                                                                              {number}

                                                                                                                                                                            property directionX

                                                                                                                                                                            readonly directionX: string;
                                                                                                                                                                            • The current, or last known, horizontal scroll direction. Possible string values include right and left.

                                                                                                                                                                              {string}

                                                                                                                                                                            property directionY

                                                                                                                                                                            readonly directionY: string;
                                                                                                                                                                            • The current, or last known, vertical scroll direction. Possible string values include down and up.

                                                                                                                                                                              {string}

                                                                                                                                                                            property fullscreen

                                                                                                                                                                            fullscreen: boolean;
                                                                                                                                                                            • {boolean} If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.

                                                                                                                                                                            property ionScroll

                                                                                                                                                                            ionScroll: EventEmitterProxy<ScrollEvent>;
                                                                                                                                                                            • {ScrollEvent} Emitted on every scroll event.

                                                                                                                                                                            property ionScrollEnd

                                                                                                                                                                            ionScrollEnd: EventEmitterProxy<ScrollEvent>;
                                                                                                                                                                            • {ScrollEvent} Emitted when scrolling ends.

                                                                                                                                                                            property ionScrollStart

                                                                                                                                                                            ionScrollStart: EventEmitterProxy<ScrollEvent>;
                                                                                                                                                                            • {ScrollEvent} Emitted when the scrolling first starts.

                                                                                                                                                                            property isScrolling

                                                                                                                                                                            readonly isScrolling: boolean;
                                                                                                                                                                            • If the content is actively scrolling or not.

                                                                                                                                                                              {boolean}

                                                                                                                                                                            property scrollDownOnLoad

                                                                                                                                                                            scrollDownOnLoad: boolean;
                                                                                                                                                                            • {boolean} If true, the content will scroll down on load.

                                                                                                                                                                            property scrollHeight

                                                                                                                                                                            readonly scrollHeight: number;
                                                                                                                                                                            • Content height including content which is not visible on the screen due to overflow. Read-only.

                                                                                                                                                                              {number}

                                                                                                                                                                            property scrollLeft

                                                                                                                                                                            scrollLeft: number;
                                                                                                                                                                            • Parameter top

                                                                                                                                                                            property scrollTop

                                                                                                                                                                            scrollTop: number;
                                                                                                                                                                            • Parameter top

                                                                                                                                                                            property scrollWidth

                                                                                                                                                                            readonly scrollWidth: number;
                                                                                                                                                                            • Content width including content which is not visible due to overflow. Read-only.

                                                                                                                                                                              {number}

                                                                                                                                                                            property statusbarPadding

                                                                                                                                                                            statusbarPadding: boolean;

                                                                                                                                                                            method addImg

                                                                                                                                                                            addImg: (img: Img) => void;

                                                                                                                                                                            method addScrollPadding

                                                                                                                                                                            addScrollPadding: (newPadding: number) => void;
                                                                                                                                                                            • DOM WRITE Adds padding to the bottom of the scroll element when the keyboard is open so content below the keyboard can be scrolled into view.

                                                                                                                                                                            method clearScrollPaddingFocusOut

                                                                                                                                                                            clearScrollPaddingFocusOut: () => void;
                                                                                                                                                                            • DOM WRITE

                                                                                                                                                                            method enableJsScroll

                                                                                                                                                                            enableJsScroll: () => void;

                                                                                                                                                                            method getContentDimensions

                                                                                                                                                                            getContentDimensions: () => ContentDimensions;
                                                                                                                                                                            • Returns the content and scroll elements' dimensions.

                                                                                                                                                                              Returns

                                                                                                                                                                              {object} dimensions The content and scroll elements' dimensions {number} dimensions.contentHeight content offsetHeight {number} dimensions.contentTop content offsetTop {number} dimensions.contentBottom content offsetTop+offsetHeight {number} dimensions.contentWidth content offsetWidth {number} dimensions.contentLeft content offsetLeft {number} dimensions.contentRight content offsetLeft + offsetWidth {number} dimensions.scrollHeight scroll scrollHeight {number} dimensions.scrollTop scroll scrollTop {number} dimensions.scrollBottom scroll scrollTop + scrollHeight {number} dimensions.scrollWidth scroll scrollWidth {number} dimensions.scrollLeft scroll scrollLeft {number} dimensions.scrollRight scroll scrollLeft + scrollWidth

                                                                                                                                                                            method getFixedElement

                                                                                                                                                                            getFixedElement: () => HTMLElement;

                                                                                                                                                                            method getScrollElement

                                                                                                                                                                            getScrollElement: () => HTMLElement;

                                                                                                                                                                            method imgsUpdate

                                                                                                                                                                            imgsUpdate: () => void;

                                                                                                                                                                            method isImgsUpdatable

                                                                                                                                                                            isImgsUpdatable: () => boolean;

                                                                                                                                                                            method ngAfterViewInit

                                                                                                                                                                            ngAfterViewInit: () => void;

                                                                                                                                                                            method ngOnDestroy

                                                                                                                                                                            ngOnDestroy: () => void;

                                                                                                                                                                            method onScrollElementTransitionEnd

                                                                                                                                                                            onScrollElementTransitionEnd: (callback: (ev: TransitionEvent) => void) => void;

                                                                                                                                                                            method removeImg

                                                                                                                                                                            removeImg: (img: Img) => void;

                                                                                                                                                                            method resize

                                                                                                                                                                            resize: () => void;
                                                                                                                                                                            • Tell the content to recalculate its dimensions. This should be called after dynamically adding/removing headers, footers, or tabs.

                                                                                                                                                                            method scrollTo

                                                                                                                                                                            scrollTo: (
                                                                                                                                                                            x: number,
                                                                                                                                                                            y: number,
                                                                                                                                                                            duration?: number,
                                                                                                                                                                            done?: Function
                                                                                                                                                                            ) => Promise<any>;
                                                                                                                                                                            • Scroll to the specified position.

                                                                                                                                                                              Parameter x

                                                                                                                                                                              The x-value to scroll to.

                                                                                                                                                                              Parameter y

                                                                                                                                                                              The y-value to scroll to.

                                                                                                                                                                              Parameter duration

                                                                                                                                                                              Duration of the scroll animation in milliseconds. Defaults to 300.

                                                                                                                                                                              Returns

                                                                                                                                                                              {Promise} Returns a promise which is resolved when the scroll has completed.

                                                                                                                                                                            method scrollToBottom

                                                                                                                                                                            scrollToBottom: (duration?: number) => Promise<any>;
                                                                                                                                                                            • Scroll to the bottom of the content component.

                                                                                                                                                                              Parameter duration

                                                                                                                                                                              Duration of the scroll animation in milliseconds. Defaults to 300.

                                                                                                                                                                              Returns

                                                                                                                                                                              {Promise} Returns a promise which is resolved when the scroll has completed.

                                                                                                                                                                            method scrollToTop

                                                                                                                                                                            scrollToTop: (duration?: number) => Promise<any>;
                                                                                                                                                                            • Scroll to the top of the content component.

                                                                                                                                                                              Parameter duration

                                                                                                                                                                              Duration of the scroll animation in milliseconds. Defaults to 300.

                                                                                                                                                                              Returns

                                                                                                                                                                              {Promise} Returns a promise which is resolved when the scroll has completed.

                                                                                                                                                                            method setScrollElementStyle

                                                                                                                                                                            setScrollElementStyle: (prop: string, val: any) => void;
                                                                                                                                                                            • DOM WRITE

                                                                                                                                                                            class DateTime

                                                                                                                                                                            class DateTime
                                                                                                                                                                            extends BaseInput<DateTimeData>
                                                                                                                                                                            implements AfterContentInit, ControlValueAccessor, OnDestroy {}
                                                                                                                                                                            • DateTime The DateTime component is used to present an interface which makes it easy for users to select dates and times. Tapping on <ion-datetime> will display a picker interface that slides up from the bottom of the page. The picker then displays scrollable columns that can be used to individually select years, months, days, hours and minute values. The DateTime component is similar to the native <input type="datetime-local"> element, however, Ionic's DateTime component makes it easy to display the date and time in a preferred format, and manage the datetime values.

                                                                                                                                                                              <ion-item>
                                                                                                                                                                              <ion-label>Date</ion-label>
                                                                                                                                                                              <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="myDate"></ion-datetime>
                                                                                                                                                                              </ion-item>

                                                                                                                                                                              ## Display and Picker Formats

                                                                                                                                                                              The DateTime component displays the values in two places: in the <ion-datetime> component, and in the interface that is presented from the bottom of the screen. The following chart lists all of the formats that can be used.

                                                                                                                                                                              | Format | Description | Example | |---------|--------------------------------|-------------------------| | YYYY | Year, 4 digits | 2018 | | YY | Year, 2 digits | 18 | | M | Month | 1 ... 12 | | MM | Month, leading zero | 01 ... 12 | | MMM | Month, short name | Jan | | MMMM | Month, full name | January | | D | Day | 1 ... 31 | | DD | Day, leading zero | 01 ... 31 | | DDD | Day, short name | Fri | | DDDD | Day, full name | Friday | | H | Hour, 24-hour | 0 ... 23 | | HH | Hour, 24-hour, leading zero | 00 ... 23 | | h | Hour, 12-hour | 1 ... 12 | | hh | Hour, 12-hour, leading zero | 01 ... 12 | | a | 12-hour time period, lowercase | am pm | | A | 12-hour time period, uppercase | AM PM | | m | Minute | 1 ... 59 | | mm | Minute, leading zero | 01 ... 59 | | s | Second | 1 ... 59 | | ss | Second, leading zero | 01 ... 59 | | Z | UTC Timezone Offset | Z or +HH:mm or -HH:mm |

                                                                                                                                                                              **Important**: See the [Month Names and Day of the Week Names](#month-names-and-day-of-the-week-names) section below on how to use different names for the month and day.

                                                                                                                                                                              ### Display Format

                                                                                                                                                                              The displayFormat input property specifies how a datetime's value should be printed, as formatted text, within the ion-datetime component.

                                                                                                                                                                              In the following example, the display in the <ion-datetime> will use the month's short name, the numerical day with a leading zero, a comma and the four-digit year. In addition to the date, it will display the time with the hours in the 24-hour format and the minutes. Any character can be used as a separator. An example display using this format is: Jun 17, 2005 11:06.

                                                                                                                                                                              <ion-item>
                                                                                                                                                                              <ion-label>Date</ion-label>
                                                                                                                                                                              <ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="myDate"></ion-datetime>
                                                                                                                                                                              </ion-item>

                                                                                                                                                                              ### Picker Format

                                                                                                                                                                              The pickerFormat input property determines which columns should be shown in the interface, the order of the columns, and which format to use within each column. If the pickerFormat input is not provided then it will default to the displayFormat.

                                                                                                                                                                              In the following example, the display in the <ion-datetime> will use the MM/YYYY format, such as 06/2020. However, the picker interface will display two columns with the month's long name, and the four-digit year.

                                                                                                                                                                              <ion-item>
                                                                                                                                                                              <ion-label>Date</ion-label>
                                                                                                                                                                              <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" [(ngModel)]="myDate"></ion-datetime>
                                                                                                                                                                              </ion-item>

                                                                                                                                                                              ### Datetime Data

                                                                                                                                                                              Historically, handling datetime values within JavaScript, or even within HTML inputs, has always been a challenge. Specifically, JavaScript's Date object is notoriously difficult to correctly parse apart datetime strings or to format datetime values. Even worse is how different browsers and JavaScript versions parse various datetime strings differently, especially per locale.

                                                                                                                                                                              But no worries, all is not lost! Ionic's datetime input has been designed so developers can avoid the common pitfalls, allowing developers to easily format datetime values within the input, and give the user a simple datetime picker for a great user experience.

                                                                                                                                                                              ##### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ

                                                                                                                                                                              Ionic uses the [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) for its value. The value is simply a string, rather than using JavaScript's Date object. Additionally, when using the ISO datetime format, it makes it easier to serialize and pass within JSON objects, and sending databases a standardized format which it can be easily parsed if need be.

                                                                                                                                                                              To create an ISO datetime string for the current date and time, e.g. use const currentDate = (new Date()).toISOString();.

                                                                                                                                                                              An ISO format can be used as a simple year, or just the hour and minute, or get more detailed down to the millisecond and timezone. Any of the ISO formats below can be used, and after a user selects a new value, Ionic will continue to use the same ISO format which datetime value was originally given as.

                                                                                                                                                                              | Description | Format | Datetime Value Example | |----------------------|------------------------|------------------------------| | Year | YYYY | 1994 | | Year and Month | YYYY-MM | 1994-12 | | Complete Date | YYYY-MM-DD | 1994-12-15 | | Date and Time | YYYY-MM-DDTHH:mm | 1994-12-15T13:47 | | UTC Timezone | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20.789Z | | Timezone Offset | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20.789+5:00 | | Hour and Minute | HH:mm | 13:47 | | Hour, Minute, Second | HH:mm:ss | 13:47:20 |

                                                                                                                                                                              Note that the year is always four-digits, milliseconds (if it's added) is always three-digits, and all others are always two-digits. So the number representing January always has a leading zero, such as 01. Additionally, the hour is always in the 24-hour format, so 00 is 12am on a 12-hour clock, 13 means 1pm, and 23 means 11pm.

                                                                                                                                                                              It's also important to note that neither the displayFormat or pickerFormat can set the datetime value's output, which is the value that is set by the component's ngModel. The format's are merely for displaying the value as text and the picker's interface, but the datetime's value is always persisted as a valid ISO 8601 datetime string.

                                                                                                                                                                              ## Min and Max Datetimes

                                                                                                                                                                              Dates are infinite in either direction, so for a user's selection there should be at least some form of restricting the dates that can be selected. By default, the maximum date is to the end of the current year, and the minimum date is from the beginning of the year that was 100 years ago.

                                                                                                                                                                              To customize the minimum and maximum datetime values, the min and max component inputs can be provided which may make more sense for the app's use-case, rather than the default of the last 100 years. Following the same IS0 8601 format listed in the table above, each component can restrict which dates can be selected by the user. Below is an example of restricting the date selection between the beginning of 2016, and October 31st of 2020:

                                                                                                                                                                              <ion-item>
                                                                                                                                                                              <ion-label>Date</ion-label>
                                                                                                                                                                              <ion-datetime displayFormat="MMMM YYYY" min="2016" max="2020-10-31" [(ngModel)]="myDate">
                                                                                                                                                                              </ion-datetime>
                                                                                                                                                                              </ion-item>

                                                                                                                                                                              ## Month Names and Day of the Week Names

                                                                                                                                                                              At this time, there is no one-size-fits-all standard to automatically choose the correct language/spelling for a month name, or day of the week name, depending on the language or locale. Good news is that there is an [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) standard which *most* browsers have adopted. However, at this time the standard has not been fully implemented by all popular browsers so Ionic is unavailable to take advantage of it *yet*. Additionally, Angular also provides an internationalization service, but it is still under heavy development so Ionic does not depend on it at this time.

                                                                                                                                                                              All things considered, the by far easiest solution is to just provide an array of names if the app needs to use names other than the default English version of month and day names. The month names and day names can be either configured at the app level, or individual ion-datetime level.

                                                                                                                                                                              ### App Config Level

                                                                                                                                                                              //app.module.ts
                                                                                                                                                                              @NgModule({
                                                                                                                                                                              ...,
                                                                                                                                                                              imports: [
                                                                                                                                                                              IonicModule.forRoot(MyApp, {
                                                                                                                                                                              monthNames: ['janeiro', 'fevereiro', 'mar\u00e7o', ... ],
                                                                                                                                                                              monthShortNames: ['jan', 'fev', 'mar', ... ],
                                                                                                                                                                              dayNames: ['domingo', 'segunda-feira', 'ter\u00e7a-feira', ... ],
                                                                                                                                                                              dayShortNames: ['dom', 'seg', 'ter', ... ],
                                                                                                                                                                              })
                                                                                                                                                                              ],
                                                                                                                                                                              ...
                                                                                                                                                                              })

                                                                                                                                                                              ### Component Input Level

                                                                                                                                                                              <ion-item>
                                                                                                                                                                              <ion-label>PerĂ­odo</ion-label>
                                                                                                                                                                              <ion-datetime displayFormat="DDDD MMM D, YYYY" [(ngModel)]="myDate"
                                                                                                                                                                              monthNames="janeiro, fevereiro, mar\u00e7o, ..."
                                                                                                                                                                              monthShortNames="jan, fev, mar, ..."
                                                                                                                                                                              dayNames="domingo, segunda-feira, ter\u00e7a-feira, ..."
                                                                                                                                                                              dayShortNames="dom, seg, ter, ..."></ion-datetime>
                                                                                                                                                                              </ion-item>

                                                                                                                                                                              ### Advanced Datetime Validation and Manipulation

                                                                                                                                                                              The datetime picker provides the simplicity of selecting an exact format, and persists the datetime values as a string using the standardized [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime). However, it's important to note that ion-datetime does not attempt to solve all situtations when validating and manipulating datetime values. If datetime values need to be parsed from a certain format, or manipulated (such as adding 5 days to a date, subtracting 30 minutes, etc.), or even formatting data to a specific locale, then we highly recommend using [moment.js](http://momentjs.com/) to "Parse, validate, manipulate, and display dates in JavaScript". [Moment.js](http://momentjs.com/) has quickly become our goto standard when dealing with datetimes within JavaScript, but Ionic does not prepackage this dependency since most apps will not require it, and its locale configuration should be decided by the end-developer.

                                                                                                                                                                              <ion-item>
                                                                                                                                                                              <ion-label>Date</ion-label>
                                                                                                                                                                              <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="myDate">
                                                                                                                                                                              </ion-datetime>
                                                                                                                                                                              </ion-item>

                                                                                                                                                                              /docs/demos/src/datetime/

                                                                                                                                                                            constructor

                                                                                                                                                                            constructor(
                                                                                                                                                                            form: Form,
                                                                                                                                                                            config: Config,
                                                                                                                                                                            elementRef: any,
                                                                                                                                                                            renderer: any,
                                                                                                                                                                            item: Item,
                                                                                                                                                                            _pickerCtrl: PickerController
                                                                                                                                                                            );

                                                                                                                                                                              property cancelText

                                                                                                                                                                              cancelText: string;
                                                                                                                                                                              • {string} The text to display on the picker's cancel button. Default: Cancel.

                                                                                                                                                                              property dayNames

                                                                                                                                                                              dayNames: any;
                                                                                                                                                                              • {array} Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English.

                                                                                                                                                                              property dayShortNames

                                                                                                                                                                              dayShortNames: any;
                                                                                                                                                                              • {array} Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English.

                                                                                                                                                                              property dayValues

                                                                                                                                                                              dayValues: any;
                                                                                                                                                                              • {array | string} Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the dayValues input can take either an array of numbers, or string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like 31 in February, it will correctly not show days which are not valid for the selected month.

                                                                                                                                                                              property displayFormat

                                                                                                                                                                              displayFormat: string;
                                                                                                                                                                              • {string} The display format of the date and time as text that shows within the item. When the pickerFormat input is not used, then the displayFormat is used for both display the formatted text, and determining the datetime picker's columns. See the pickerFormat input description for more info. Defaults to MMM D, YYYY.

                                                                                                                                                                              property doneText

                                                                                                                                                                              doneText: string;
                                                                                                                                                                              • {string} The text to display on the picker's "Done" button. Default: Done.

                                                                                                                                                                              property hourValues

                                                                                                                                                                              hourValues: any;
                                                                                                                                                                              • {array | string} Values used to create the list of selectable hours. By default the hour values range from 0 to 23 for 24-hour, or 1 to 12 for 12-hour. However, to control exactly which hours to display, the hourValues input can take either an array of numbers, or string of comma separated numbers.

                                                                                                                                                                              property initialValue

                                                                                                                                                                              initialValue: string;
                                                                                                                                                                              • {string} The default datetime selected in picker modal if field value is empty. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), 1996-12-19.

                                                                                                                                                                              property ionCancel

                                                                                                                                                                              ionCancel: any;
                                                                                                                                                                              • {any} Emitted when the datetime selection was cancelled.

                                                                                                                                                                              property max

                                                                                                                                                                              max: string;
                                                                                                                                                                              • {string} The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), 1996-12-19. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as 1994. Defaults to the end of this year.

                                                                                                                                                                              property min

                                                                                                                                                                              min: string;
                                                                                                                                                                              • {string} The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as 1996-12-19. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as 1994. Defaults to the beginning of the year, 100 years ago from today.

                                                                                                                                                                              property minuteValues

                                                                                                                                                                              minuteValues: any;
                                                                                                                                                                              • {array | string} Values used to create the list of selectable minutes. By default the mintues range from 0 to 59. However, to control exactly which minutes to display, the minuteValues input can take either an array of numbers, or string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be minuteValues="0,15,30,45".

                                                                                                                                                                              property monthNames

                                                                                                                                                                              monthNames: any;
                                                                                                                                                                              • {array} Full names for each month name. This can be used to provide locale month names. Defaults to English.

                                                                                                                                                                              property monthShortNames

                                                                                                                                                                              monthShortNames: any;
                                                                                                                                                                              • {array} Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English.

                                                                                                                                                                              property monthValues

                                                                                                                                                                              monthValues: any;
                                                                                                                                                                              • {array | string} Values used to create the list of selectable months. By default the month values range from 1 to 12. However, to control exactly which months to display, the monthValues input can take either an array of numbers, or string of comma separated numbers. For example, if only summer months should be shown, then this input value would be monthValues="6,7,8". Note that month numbers do *not* have a zero-based index, meaning January's value is 1, and December's is 12.

                                                                                                                                                                              property pickerFormat

                                                                                                                                                                              pickerFormat: string;
                                                                                                                                                                              • {string} The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use displayFormat.

                                                                                                                                                                              property pickerOptions

                                                                                                                                                                              pickerOptions: any;
                                                                                                                                                                              • {any} Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options.

                                                                                                                                                                              property placeholder

                                                                                                                                                                              placeholder: string;
                                                                                                                                                                              • {string} The text to display when there's no date selected yet. Using lowercase to match the input attribute

                                                                                                                                                                              property yearValues

                                                                                                                                                                              yearValues: any;
                                                                                                                                                                              • {array | string} Values used to create the list of selectable years. By default the year values range between the min and max datetime inputs. However, to control exactly which years to display, the yearValues input can take either an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be yearValues="2024,2020,2016,2012,2008".

                                                                                                                                                                              method calcMinMax

                                                                                                                                                                              calcMinMax: (now?: Date) => void;

                                                                                                                                                                              method divyColumns

                                                                                                                                                                              divyColumns: () => void;

                                                                                                                                                                              method generate

                                                                                                                                                                              generate: () => void;

                                                                                                                                                                              method getDefaultValueDateString

                                                                                                                                                                              getDefaultValueDateString: () => string;
                                                                                                                                                                              • Get the default value as a date string

                                                                                                                                                                              method getValue

                                                                                                                                                                              getValue: () => DateTimeData;

                                                                                                                                                                              method getValueOrDefault

                                                                                                                                                                              getValueOrDefault: () => DateTimeData;

                                                                                                                                                                              method hasValue

                                                                                                                                                                              hasValue: () => boolean;

                                                                                                                                                                              method ngAfterContentInit

                                                                                                                                                                              ngAfterContentInit: () => void;

                                                                                                                                                                              method open

                                                                                                                                                                              open: () => void;

                                                                                                                                                                              method updateText

                                                                                                                                                                              updateText: () => void;

                                                                                                                                                                              method validate

                                                                                                                                                                              validate: () => void;

                                                                                                                                                                              method validateColumn

                                                                                                                                                                              validateColumn: (
                                                                                                                                                                              name: string,
                                                                                                                                                                              index: number,
                                                                                                                                                                              min: number,
                                                                                                                                                                              max: number,
                                                                                                                                                                              lowerBounds: number[],
                                                                                                                                                                              upperBounds: number[]
                                                                                                                                                                              ) => number;

                                                                                                                                                                              class DeepLinker

                                                                                                                                                                              class DeepLinker {}

                                                                                                                                                                              constructor

                                                                                                                                                                              constructor(
                                                                                                                                                                              _app: App,
                                                                                                                                                                              _serializer: UrlSerializer,
                                                                                                                                                                              _location: any,
                                                                                                                                                                              _moduleLoader: ModuleLoader,
                                                                                                                                                                              _baseCfr: any
                                                                                                                                                                              );

                                                                                                                                                                                method getComponentFromName

                                                                                                                                                                                getComponentFromName: (componentName: string) => Promise<any>;

                                                                                                                                                                                  method getCurrentSegments

                                                                                                                                                                                  getCurrentSegments: (browserUrl?: string) => NavSegment[];

                                                                                                                                                                                    method getNavLinkComponent

                                                                                                                                                                                    getNavLinkComponent: (link: NavLink) => Promise<any>;

                                                                                                                                                                                      method getSegmentFromNav

                                                                                                                                                                                      getSegmentFromNav: (
                                                                                                                                                                                      nav: NavController,
                                                                                                                                                                                      component?: any,
                                                                                                                                                                                      data?: any
                                                                                                                                                                                      ) => NavSegment;

                                                                                                                                                                                        method getSegmentFromTab

                                                                                                                                                                                        getSegmentFromTab: (
                                                                                                                                                                                        navContainer: NavigationContainer,
                                                                                                                                                                                        component?: any,
                                                                                                                                                                                        data?: any
                                                                                                                                                                                        ) => NavSegment;

                                                                                                                                                                                          method getSegmentsFromNav

                                                                                                                                                                                          getSegmentsFromNav: (nav: NavigationContainer) => NavSegment[];

                                                                                                                                                                                            class DeepLinkMetadata

                                                                                                                                                                                            class DeepLinkMetadata implements IonicPageMetadata {}

                                                                                                                                                                                            property component

                                                                                                                                                                                            component?: any;

                                                                                                                                                                                              property defaultHistory

                                                                                                                                                                                              defaultHistory?: any[] | string[];

                                                                                                                                                                                                property loadChildren

                                                                                                                                                                                                loadChildren?: string;

                                                                                                                                                                                                  property name

                                                                                                                                                                                                  name?: string;

                                                                                                                                                                                                    property priority

                                                                                                                                                                                                    priority?: string;

                                                                                                                                                                                                      property segment