menu

Author Archives: admin

Login Templates

BootStrap Basic Login Template

Ionic 2 Slides


Ionic 2 Slides: Slides are an important component that provides functionality to slide the content to left or right. Slides can be used to create galleries, page-based layouts, one page layouts etc. ion-slides component is used to create slides in Ionic 2. There are various configurations available that can be used easily.
Here in this tutorial we are going to explain how to create slides in Ionic 2 framework. You can use our online editor to run the demo online.


Ionic 2 Slides Example

ion-slides component is multi section container, each section can be swiped or dragged between. Let us first create the very basic slides in Ionic 2.

Ionic 2 Slides Example:

Try it »

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

Ionic 2 Slides Example & Demo

Ionic 2 Select


Ionic 2 Select ion-select component is used to create the select element similar to the HTML <select> element. Ionic 2 provides various types of select boxes which can be used easily. It is very simple to create different types of select box in Ionic 2. Here in this tutorial we are going to explain how you can create select box with options, You can also use our online editor to run and see the output of the example.


Ionic 2 Select Dropdown | Multiselect Checkbox Example

Let us first create very basic select box-

Ionic 2 Select Example:

Try it »

By Default ion-select uses the AlertController API to open the options in overlay, You can change it to use the ActionSheetController API By passing the action-sheet to the interface property.

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

Ionic 2 Select Box Example

Multiselect Dropdown

You can also create multiple select dropdown by adding the attribute multiple=”true”. Here is an example of multiple select dropdown example-

Multiple Select Dropdown Example:

Try it »

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

Ionic 2 Multiple Select Dropdown

Call to undefined method WPSEO_Options::get_option()

Call to undefined method WPSEO_Options::get_option() After installing the amp seo glue plugin sometimes we face this issue. Here in this tutorial we are going to tell how to fix the issue

Call to undefined method WPSEO_Options::get_option()

This is issue occur due to older version of yoast plugin. I faced the same problem And to fix it i updated my Yoast seo plugin to the latest version and it fixed all. So if you are having the same issue just update the Yoast plugin to the latest version of Yoast and it will fix your issue.

Ionic 2 Segment


Ionic 2 Segment – Segment is basically group of buttons that are displayed in single line and these buttons can be used to show and hide the element based upon the segment’s value. Segments provide functionality like tabs. Here in this tutorial we are going to explain how you can create segment in ionic 2. You can also use our online demo to edit and see the output of the example.


Ionic 2 Segment Example

ion-segment component is used to create segment in ionic 2. Create segment and add the model for segment. ion-segment-button is used to add the segment buttons. After Adding button use ngSwitch and ngSwitchCase to add respective elements for the buttons. Let us first create very basic segment example. This contains following parts-

  • Html Part
  • Controller Part

Html Part : demo.html

Ionic 2 Segment Example: Html Part

Now let us create controller script part.

Controller Part : demo.ts

Ionic 2 Segment Example: Controller

Try it »

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

Ionic 2 Segment Example

Input Properties

Following input properties are available-

AttributeTypeDetails
colorstringThis is used to change the color of segment, you can add the predefined colors using this attribute . For example: color = “primary”, color =”secondary”, color= “danger”.
modestring The mode to apply to this component. Mode can be ios, wp, or md.
disabledboolean This is used to disable the segment button.

Output Properties

Following Output properties is available-

AttributeDetails
ionChangeEmitted when a segment button has been changed.

Ionic 2 Searchbar


Ionic 2 Searchbar – Searchbar provides search functioinality to the users. A searchbar basically binds a model with input which triggers an event when model is changed. It is very simple to create searchbar in Ionic 2. Here in this tutorial we are going to explain how you can create searchbar in Ionic 2. You can also use our online editor to run and see the output of the example.


Ionic 2 Searchbar | Search Functionality Example

Let us create very basic searchbar –

It contains the following part-

  • Html Part
  • Controller Part

Now let us go one by one to understand how it works-

Html Part: demo.html

Html part contains the following input elements for searchbar.

Ionic 2 Searchbar | Search Functionality | Example:

Now let us create the controller part of the above example.

Controller Part: demo.ts

Controller part contains the following script-

Searchbar Controller Example:

Try it »

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

Ionic 2 Searchbar Example

Ionic 2 Range


Ionic 2 Range slider – The range slider is basically a control which enables you to select from range of values. Range is selected using movable slider knob along with the slider bar. By default there is only one knob which controls the value of the slider but there can be dual knobs to select range between the two values.
Here in this tutorial we are going to explain how to create range sliders in Ionic 2 and use them. You can also use our online editor to run and see the output of the examples.


Ionic 2 Range Slider Example

ion-range Component is used to create the range slider. Let us first create a simple range slider –

Ionic 2 Range Example With Model

Try it »

In the above example we have create very basic range slider, we have the model brightness which handles the value of slider knob when it moves.
If you run the above example it will produce the output something like this-

Ionic 2 Range Slider Example

Input Properties

Following input properties are available-

AttributeTypeDetails
colorstringThis is used to change the color of the range slider, you can add the predefined colors using this attribute . For example: color = “primary”, color =”secondary”, color= “danger”.
modestring The mode to apply to this component. Mode can be ios, wp, or md.
minnumber Minimum integer value of the range. Defaults to 0.
maxnumber Maximum integer value of the range. Defaults to 100.
stepnumber Specifies the value granularity. Defaults to 1.
snapsnumber If true, the knob snaps to tick marks evenly spaced based on the step property value. Defaults to false.
pinnumber If true, a pin with integer value is shown when the knob is pressed. Defaults to false.
debouncenumber How long, in milliseconds, to wait to trigger the ionChange event after each change in the range value.
dualKnobsboolean This is used to show two knobs. Defaults to false.
disabledboolean This is used to disable the range slider. Set disabled=”true” to disable the range slider. Defaults to false.

Ionic 2 Radio


Ionic 2 Radio Button: Radio button is input component which enables user to check/uncheck and holds the boolean value. Ionic 2 uses the html radio buttons but it adds some styles to the default radio buttons. Radio button component enables user to select one radio from the group of radio buttons.
It is very simple to create radio buttons in Ionic 2. Here in this tutorial we are going to explain how you can create radio buttons in ionic 2. You can also use our online editor to run and see the output of the example.


Ionic 2 Radio Button Example

Let us create basic radio button-

Ionic 2 Radio Button Example:

Try it »

checked attribute is used to set default selected and disabled attribute is used to disable the radio button.

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

Ionic 2 radio buttons example

Input Properties

Following input properties are available-

AttributeTypeDetails
colorstring This is use to change the radio button color, you can use predefined colors to use. For example: “primary”, “secondary”, “danger”.
modestringThis is used to apply mode to this component. Example- ios, wp, or md.
valueany This is used to assign the value to the radio button. Defaults to the generated id.
checkedboolean This is used to check/uncheck the radio button. Default false.
disabledboolean This is used to eanble/disable the radio button. Default false.

Ionic 2 Popover


Ionic 2 Popover : Popover is an important component of Ionic 2 framework. Popover is basically dialog that appears above the content’s view. It can be used to provide or gather information from user. It is very simple to create popover in Ionic 2. Here in this tutorial we are going to explain how you can create popover with various examples & demo. You can also use our online editor to run and see the output of the example.


Ionic 2 Popover Example

PopoverController is used to create the popovers so it must be imported before using it. Let us create the very basic popover in ionic 2, It contains the following part-

  • Html part
  • Controller Part

Html Part : demo.html

Ionic 2 Popover Example: Html Part

Controller Part : demo.ts

Popover Controller Example

Try it »

If you run the above example it will produce the following output-

Ionic 2 Popover Example

Now let us define the popover component

Controller Part : popover.ts

Create popover.ts file and add the following script-

Popover Controller Example:

Html Part : popover.html

Create popover.html file and add the content which will be displayed in popover. Here is an example of popover template-

Popover Controller Example:

Add Popover Config in app.module.ts

Add the configuration for PopoverContentPage, import { PopoverContentPage } from ‘../pages/demo/popover’; and add declaration, entryComponents for PopoverContentPage.-

Popover app.module.ts configuration Example:

Download Code


file_download Popovers


Options Available

Instance Methods

Popover Create Method Options:

ParamTypeDetails
componentobjectThe Popover view
dataobjectAny data to pass to the Popover view
optsobjectPopover options

Advanced

OptionTypeDescription
cssClassStringCss class for custom styling.
showBackdrop booleanWhether to show the backdrop. Default is true.
enableBackdropDismiss booleanWhether the popover should be dismissed by tapping the backdrop. Default is true.