Documentation | Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    

Ionic 4 UI Components

Ionic 4 UI components available in the Visual App Builder

Components PALETTE Overview

The components PALETTE is shown to the left of the Visual App Builder canvas and includes the following groups of UI components:

  • Appery.io components
  • AngularJS and Ionic 4 components
  • HTML components (including HTML for writing custom code)
  • Google Maps component.

General Component Actions

Appery.io provides a standard set of tools to copy, paste, clone (duplicate), and remove UI components. All of these actions can be accessed through the context menu.

Context Menu

To add a UI component to your app, locate it on the PALETTE and then drag and drop it to the App Builder editor page.
To manipulate it, select the component and access the context menu by clicking the gear button.
Generally, the context menu consists of the Π‘lone, Π‘opy, Paste, and Delete options. However, several UI components (for example, Card or Grid) have more than one option available from the context menu. The + button duplicated by an Add item option from the drop-down menu will add another nested item to such components. For example, it will add another cell to the Grid. Depending on the situation certain options may be unavailable.

πŸ“˜

To manage a component, select it using Breadcrumbs or the OUTLINE view.

Cloning Components

The cloning option can be useful and time-saving in creating a full clone of a UI component with all of the nested children, including other components. To apply it, select the component from the menu and click Clone.
The component with the same properties appears right after the original component by default. For the most part, all UI components or their parts can be cloned, but the ability to be cloned depends on the component’s environment. Some components cannot clone their own parts, for example, you cannot clone a Button inside the Input Addon in a Bootstrap/AngularJS project. In this instance, cloning will be unavailable for the Button component.

Copying and Pasting Components

Most of the PALETTE components can be copied with all their properties and nested components by using the context menu for the selected components.
To use the copy-paste feature:

  1. Click Copy to deposit the selected component in local storage, (this also allows copying and pasting for different projects and sessions).
  2. Then select any container UI component. The component may be located on the same page or placed on the other one.
  3. Open the intended destination context menu and select Paste.

πŸ“˜

If the Paste option is disabled, the remembered component may not be contained within the currently selected one.

Hiding Components

Components can also be hidden by clicking the icon next to the Context Menu icon (the gear button).
The corresponding eye sign on the screen gets crossed indicating that the screen contains hidden components. Click this sign again to show them until the screen data is changed.

Copy-Paste Hotkeys

Components can be copied and pasted via the Ctrl+C (⌘+C for Mac) and Ctrl+V (⌘+V for Mac) hotkeys as well. Some components (i.e. those not present in PALETTE) cannot be copied, as well as sub-components (e.g. Card Item, Grid Cell, etc.).
The previously copied component cannot be pasted into the currently selected one due to the following reasons:

  • different project types (e.g. copying from an Ionic project and trying to paste into a Bootstrap project)
  • incompatible components (e.g. trying to paste a Grid component into the IndexScreen editor page
  • nothing to paste (in this case, the Empty Clipboard message appears)
    With Ctrl+V hotkeys (⌘+V for Mac), you can paste a component inside of the currently selected one, but also right after it. If the selected component is not a container or is incompatible with the component being pasted – the latter attempts to be pasted near the selected component (only if it is compatible with one’s parent).

πŸ“˜

Copying/pasting works for the active frame context only: clicking outside the DESIGN tab of the screen editor (for example, Toolbar or Project view) and applying special hotkeys will result in no action. Click within the Project tabs: DESIGN, PROPERTIES, PALETTE panels, etc, to make the hotkeys work.

General Components Properties

Every component has its properties; some are general, others are specific to particular components. General properties belonging to most components available in the Visual App Builder include:

Property Name

Property Description

Class

List classes here.

Color

Color to use from your application's color palette.
Value types: primary, secondary, tertiary, success, warning, danger, light, medium, dark).

Component Name

The mandatory property used for identifying the component. When you drag and drop the component from the components PALETTE the Appery.io Visual Builder gives it a standard name (e.g. GoogleMap1, Image1 , etc.). It’s beneficial to rename the components so that you could easily identify them.
This property exists inside the Visual Editor only and does not have any reflection in an application.

Disabled

Every component on the page is enabled by default. You may need to disable components.
If set to true, the user cannot interact with the component.

Icon

Some components support icons. To choose the icon you need, expand Icon and click the No icon button for Style.

Attribute name

A new attribute value.

Mode

Determines which platform styles to use. Possible values are iOS or MD.

Slot

Position inside another component. It can be set to Fixed.
Some components can have different settings: Start or End.

πŸ“˜

Most properties are provided with their corresponding ? tooltips: by hovering over them, you can get information on the property and how to use it.

Page

The Page component is the main container for other Ionic 4 UI components PALETTE and, in its turn, consists of three more components: Content, Footer, and Header.

πŸ“˜

In the app page, the nested Content, Footer, and Header components are contained within the Menu component.

It is important to differentiate between the two types of the Page component for different Ionic 4 pages types (check the Project view):

  • IndexScreen for app pages (there can be only one app page in a project) and
  • Page for Screen pages (numerous Screen pages can be created in a project).

πŸ“˜

You can select and manage components using Breadcrumbs or the OUTLINE view.

Index Screen

Being the container of the highest level for all app pages, IndexScreen is the construction element that manages the general app behavior.
IndexScreen can be found under the app page only (check the Project view) and cannot be added to any other screen. No PALETTE items can be added to IndexScreen.
The IndexScreen properties available for modifying are the following:

App Content Id

The App Content Id property is used to bind app content to the menu.

Menu

To create a side menu, select True.

Split Pane

Set to True to add a split pane to the project.
(Menu should also be set to True).
If set to False, the side pane will not be displayed.

🚧

For correct work of the menu and split pane, Menu Content Id, Split Pane Content ID, and App Content Id of the app should have the same value.
Modifying these properties is recommended for experienced users only.

πŸ“˜

The advanced attributes can be added for routing purposes including main app content.

Menu

To add a side menu, set the IndexScreen Menu property to True.
The created Menu component contains Content, Menu Header and Menu Footer and has the following properties:

Property Name

Property Description

Content Id

The content's ID to be used in the menu.

Footer

If set to True, adds the footer to the menu.

Header

If set to True, adds the header to the menu.

Max Edge Start

The edge threshold for dragging the menu open. If a drag/swipe takes place over this value, the menu is not triggered.

Menu Id

The menu ID.

Side

What side of the view the menu should be placed to: Start or End.

Swipe Gesture

If set to true, the menu swiping is enabled.

Type

The display type of the menu.
Available options are Push, Reveal, Overlay.

(ionDidOpen)

Emitted when the menu is open.

(ionDidClose)

Emitted when the menu is closed.

The app page Menu component (activated if set to True under the IndexScreen PROPERTIES tab) offers three child components to be defined:

  • Content
  • Menu Header
  • Menu Footer.

These properties are similar to the Screen Page Content, Header and Footer components.

πŸ‘

Menu Header and Menu Footer (for the app page) become available if the Header and Footer properties are set to True under the IndexScreen PROPERTIES tab.
Similarly, Header and Footer (for Screen pages) become available if the Header and Footer properties are set to True under the Page PROPERTIES tab.

πŸ“˜

Check this documentation link to learn how to create a simple Ionic 4 mobile application with a menu in Appery.io.

Besides, you can check this document to learn how to use Ionic 4 Side Menu Template in Appery.io.

You can also watch this Appery.io community video that shows how to add a menu to an Ionic 4 mobile application.

Split Pane

To add a split pane, set the IndexScreen Split Pane property to True.

🚧

The IndexScreen Menu property should be also set to True to make the Split Pane accessible.

The Split Pane component has the following properties:

Property Name

Property Description

Content Id

The content's ID to be used in the menu.

When

Defines when the split pane should be shown.
From the drop-down, selecting from Ionic's predefined sizes is available: xs, sm, md, lg, and xl.
It can also be passed as a CSS media query expression or a shortcut expression. Using a boolean expression is also possible.

(ionSplitPaneVisible)

Expression to be called when the split pane visibility has changed.

Learn more about Split Pane and read on how to customize its When property here: https://ionicframework.com/docs/api/split-pane#setting-breakpoints.

Page (Screens)

The Page component (for app Screen pages) has the following properties:

Property Name

Property Description

Footer

If set to True, the footer will be added to the page.

Header

If set to True, the header will be added to the page.

Modal Screen

If set to True, this page will be used as a modal page.

Tabs

If set to True, tabs will be added to the page

🚧

If you use Tabs, the properties Show Header and Show Footer become unavailable for this page. They can be set for each tab page individually.

The Screen Page component offers three child components to be defined:

πŸ‘

Header and Footer (for Screen pages) become available if the Header and Footer properties are set to True under the Page PROPERTIES tab.
Similarly, Menu Header and Menu Footer (for the app page) become available if the Header and Footer properties are set to True under the IndexScreen PROPERTIES tab.

Content

The Content component has the following properties:

Property Name

Property Description

Force Overscroll

If set to true (with the content not triggering an overflow scroll), the scroll interaction will cause a bounce.

Fullscreen

If set to True, the content will scroll behind headers and footers.

Scroll Events

If set to true, ``ionScrollevents will be enabled and listening from(ionScroll)will start. Because of performance reasons,ionScroll``` events are disabled by default.

Scroll X

If set to true, the content scrolling will be enabled on the X-axis.

Scroll Y

Setting to false will disable the content scrolling on the Y-axis.

(ionScroll)

The event emitted while scrolling. This event is disabled by default.

🚧

In order to scroll content behind headers and footers, the Fullscreen attribute needs to be enabled for Content.

Check this link to read more about Content.

Header and Footer


The Header and Footer components have the following properties:

Property Name

Property Description

No Border

To remove the border, set to True. The default is set to False.

Translucent

If set to True, the footer will be translucent.

πŸ“˜

By default, any new Screen page is created with its Header and Footer which, in their turn, contain the following nested components: Toolbar, Toolbar Title, and Toolbar Buttons.
Check this section of the document to learn more about the Toolbar component.

Tabs

Tabs are a top level navigation component to implement a tab-based navigation. The component is based on Ionic 4 ion-tabs, ion-tab-bar and ion-tab-button components.

🚧

Setting the Page Modal Screen property to True will remove Tabs from the page.

Get Started

To add Tabs to your application, create a new screen page and set its Tabs property to True: the Tabs component with a Tab Bar (including a Tab Button) will be added to the screen.

🚧

If the Tabs property is set to True, all the existing components will be removed from the page.

In the Tabs mode, Tabs, Tab Bar and Tab Button components become available for editing. You can select any of them by clicking on each or use Breadcrumbs or the OUTLINE panel of the Visual editor.

Use the green + button on the selected Tab Bar if you need to add more Tab Button components.

Binding a page to every Tab Button is carried out with the Tab property of the button. The property contains a list of created pages where users can navigate to.

The created tabs will be displayed after navigating to the appropriate tabs page. For example, you can choose such a page with tabs as the default opening page on application loading under the Project > Routing tab.

Changing Tab Name in URL

If you need to have a special tab name in URL, enter a new name to the Tab Path property of the Tab Button component. If the property isn't specified, the name of the screen will be used in the URL.

Navigation from Tabs to Child Pages

By default, created tab buttons won't be displayed after users' navigation from the current tab to other pages that are not bound to other tab buttons.
If you need to show tab buttons for such navigation, use the Tab Path property of the Tab Button component.
First of all, add new child routes that have the following structure:

[
  {"path": "screen2", "screenName": "Screen2"},
  {"path": "screen3", "screenName": "Screen3"},
  ...
]

In these cases, path is the name of the tab that will be used in the URL and screenName is the name of the page from the Project tree.

After child routes have been defined, drag and drop link components (for example, a Button) from the PALETTE to the tab page navigation from which will be carried out.

Then add an advanced attribute routerLink to the link component clicking on that will be clicked on to navigate to a child page. Pass the path of the created child route as the value of the attribute (routerLink=screen2).

As a result, after clicking on the link component, navigation will take place and tab buttons will be kept on the page.

πŸ“˜

If you use Tabs, properties Show Header and Show Footer will become unavailable for this page. They can be set for each tab page individually.

The Tabs component has the following properties:

Property Name

Property Description

(ionTabsDidChange)

The event emitted when the navigation has finished transitioning to a new page.

(ionTabsWillChange)

The event emitted when the navigation is about to transition to a new page.

Read more about Tabs here.

Tab Bar

The Tab Bar component has the following properties:

Property Name

Property Description

Selected Tab

The selected tab by default.

Slot

Tab Bar position relative to the screen: Top or Bottom.

Translucent

If set to True, the Tab Bar will be translucent. It only applies when the Mode is iOS and the device supports backdrop-filter.

πŸ“˜

You can check this document to learn how to use Ionic 4 Tabs Template in Appery.io.

Tab Button

To add a new Tab Button, click the green + button on the Tab Bar.
The Tab Button component has the following properties:

Property Name

Property Description

Badge

Adds a badge to the Tab Button.
Class - defines equal styles for elements with the same class name.
Text - the displayed text of the badge.

Class

Defines equal styles for elements with the same class name.

Href

It contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.

Icon

Adds an icon to the Tab Button.
Class - defines equal styles for elements with the same class name.
Name - allows changing Ionic 4 icon style dynamically by property binding to [name]. You can use string (Ionic 4 Icon name e.g. star') or variable name.
Style - click the No icon button to select from default Ionic 4 icons.
Label - adds a label to the Tab Button.

Label

Adds a label to the Tab Button.

Layout

Sets the layout of the text and icon in the tab bar.
Possible values are Icon Bottom, Icon End, Icon Hide, Icon Start, Icon Top, Label Hide. The defaults are set to Icon Top.

Selected

Makes the tab selected.

Tab

A tab id must be provided for each tab button. It is used internally to reference the selected tab or by the router to switch between them.

Tab Child Routes

A list of child routes to set internal navigation of the tab.

[
  {"path": "screen2", "screenName": "Screen2"},
  {"path": "screen3", "screenName": "Screen3"},
  ...
]

Tab Path

The URL path for this tab. If not set, the screen name will be used.

Check this Ionic documentation for more information.

Button

Buttons provide clickable elements used in forms or anywhere where simple, standard button functionality is required.
Being the most popular component, the Button component can be used to navigate to a page or link, copy a property to a local storage variable or set the other component’s property, open and close popups, invoke a service or run JavaScript. It may display text, icons, or both. Buttons can be styled with several attributes to look a specific way:

Property Name

Property Description

Back Button

Default Href - the URL to navigate back to by default when there is no history.
Icon - icon name to use for the back button;
Click the Default icon button to select an icon, or leave it to default.
Text - text to display in the back button.

Button Type

Click to select between Button (default) or Bar Button.

Component

Use this property to change the button role for interaction with Menu (Ionic Menu Button) or Routing (Ionic Back Button):
Ionic Button
Ionic Menu Button
Ionic Back Button.
Navigation with Routing has higher priority than Href.

Expand

Set to Block for a full-width button or to Full for a full-width button without left and right borders.

Fill

Set to Solid or select Clear for a transparent button, or Outline for a transparent button with a border.

Icon

Makes a button look like an icon. This property converts the button to an icon by changing its Style property and ignoring the Text property.
Name allows changing Ionic 4 icon style dynamically by property binding to [name].
Slot - position inside the button: Icon only, Start, End.
Style - click No icon to change the icon style by selecting a needed icon.

Link Features

Options for the component to be used as a link:
Download - instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name.
Href - contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Rel - specifies the relationship of the target object to the link object.
Target - specifies where to display the linked URL. Only applies when an Href is provided: Blank, Self, Parent, or Top
Type of the Button: Submit, Reset, Button.

Menu Button

Auto Hide - automatically hides the menu button when the corresponding menu is not active.
Menu - an optional property that maps to a Menu's menuId property. It can also be start or end for the menu side. It is used to find the correct menu to toggle.

Routing

Route Name - defines the list of routes names from the Routing panel.
Route Params - the field used to add values for Route Params described in the Routing panel.
Router Direction - when using a router, it specifies the transition direction (back, forward or root) when navigating to another page using href.

Shape

Setting to Round makes the button rounded.

Size

Select the preferred button size: Small, Defaultor Large.

Strong

If set to True, activates a button with a heavier font weight.

Text

Button text.

(click)

Action to be triggered when the button is clicked.

You can also check the Ionic documentation to read more about Button.

Card

The Card component consists of Card Items, containers that can hold any other UI component. The number of Card Items can be changed by adding or cloning them.
The Card component has the following properties:

Property Name

Property Description

Button

If set to True, a button tag will be rendered and the card will become tappable.

Link Features (options for the component used as a link)

Download- instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name.
Href - contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Rel - specifies the relationship of the target object to the link object.
Target - specifies where to display the linked URL. Only applies when an Href is provided: Blank, Self, Parent, or Top.
Type of the Button: Submit, Reset, Button.

Routing

Route Name -defines the list of routes names from the Routing panel.
Route Params field is to add values for Route Params described in the Routing panel.
Router Direction - when using a router, it specifies the transition direction when navigating to another page using Href.
Navigation with Routing has higher priority than Href.

Card ltem

To add a Card Item, click the + button on the Card.
The Card Item component has the following properties:

Property Name

Property Description

Text

Card item text.
Visible if the card Item has no child elements.

Translucent

If set to True, the card header will be translucent.

Type

Click to select card content type:
Card content or Card header.
Properties Color and Translucent are used only with Card Headers.

Card ltem Title

To add a Card Item Title, click the + button on the Card Item or use the Text component from the PALETTE.
The Card Item Title component has the following properties:

Title Text

Content title text. Visible if Title has no child elements.

Type

Click to select the card title type: Card Title or Card Subtitle.

Please visit Ionic documentation to read more about Card.

Chart

The Chart component offers a variety of chart types and visualization styles that come with extensive configuration options. This flexibility allows for creating the needed chart quickly and easily. The following built-in chart types are available in Appery.io Visual App Builder:
Bar
Bubble
Doughnut
Line
Pie
Polar Area
Radar
Scatter
Mixed

πŸ‘

More details about the types of the Chart component and their properties can be found in this document.

Common Chart Component Properties

The Chart component has the following properties that apply to all chart types:

Property Name

Property Description

Auto init Chart

If set to true, the Chart component is automatically initiated.

Class

Adds CSS classes for chart wrapper (class will not modify the chart canvas).

Labels

The array of labels to display. To specify it, switch to the CODE tab, add a variable, ex. label of Any type and provide the value(s) to be displayed in the chart: For example: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'] (for simple labels) or [ ['Label 1', 'value: 3'], 'Label 2', 'Label 3', 'Label 4', ['Label 5', 'Value: 5'] ] (for multilabels). Now, the Labels property can be defined with the label value.

Type

Select the type of chart to be created:
line (default), bar, horizontal bar, radar, pie, doughnut, polarArea, bubble, scatter,mixed.

Show Advanced Properties

If set to true, the advanced chart properties can be accessed:

  • All - all the advanced properties are available.
  • Animation - animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes:
    duration - the number of milliseconds the animation takes
    easing - the easing function to be used.
    Possible values are linear,easInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce.
  • Legend - displays data about the datasets on the chart:
    Align - alignment of the legend (start, center (default for unrecognized values), or end)
    Display - set to true to display the legend
    Labels Box Width - the width of the colored box
    Labels Font Color - the text color
    Labels Font Size - the text font size
    Labels Font Style - the text font style
    Labels Use Point Style - the label style will match corresponding point style (size is based on the mimimum value between Box Width and Font Size)
    Position - the legend position (top, left, bottom, right)
    Reverse - the legend will show datasets in reverse order
    Rtl - set to true to render the legends from right to left.
  • Title - defines text to draw at the top of the chart:
    Display - set to true to display the title
    Font Color - the font color
    Font Size - the font size
    Font Style - the font style
    Line Height - the height of an individual line of text
    Padding - the number of pixels to add above and below the title text
    Position - the title position (top, left, bottom, right)
    Text - the title text to display. If specified as an array, text is rendered on multiple lines.
  • Tooltips:
    Background Color - the tooltip background color
    Body Align - the horizontal alignment of the body text lines. The titleAlign, bodyAlign and footerAlign options define the horizontal position of the text lines with respect to the tooltip box. The following values are
    supported: left (default), right, center. These options are only applied to text lines. Color boxes are always aligned to
    the left edge.
    Body Font Color
    Body Font Size
    Body Font Style
    Body Spacing - the spacing to add to top and bottom of each tooltip item
    Border Color
    Border Width - the border size
    Caret Padding - extra distance to move the end of the tooltip arrow away from the tooltip point
    Caret Size - size, in px, of the tooltip arrow
    Corner Radius - the radius of the tooltip corner curves
    Display - if set to true (default), the tooltips are enabled on canvas
    Display Colors - if set to true, color boxes are shown in the tooltip
    Intersect - if set to true, the tooltip mode applies only when the mouse position intersects with an element. If set to false, the mode will be applied at all times
    Mode - sets which elements appear in the tooltip. When configuring interaction with the graph via hover or tooltips, a number of different
    modes are available. The modes and how they behave in conjunction with the intersect setting are detailed below:
    point finds all of the items that intersect the point.
    nearest gets the items that are at the nearest distance to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). You can use the axis setting to define which directions are used in distance calculation. If intersect is set to true, it is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.
    index finds item at the same index. If the intersect setting is true, the first intersecting item is used to determine the index in the data. If intersect is set to false the nearest item in the X direction is used to determine the index. To use index mode in a chart like the horizontal bar chart, where we search along the Y direction, you can use the axis setting introduced in v2.7.0. Setting this value to y on the Y direction is used.
    dataset finds items in the same dataset. If the intersect setting is true, the first intersecting item is used to determine the index in the data. If intersect is set to false, the nearest item is used to determine the index.
    X returns all items that would intersect based on the X coordinate of the position only. It would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts.
    y returns all items that would intersect based on the Y coordinate of the position. This would be useful for a horizontal cursor implementation. Note that this only applies to cartesian charts.
    MultiKey Background - the color to draw behind the colored boxes when multiple items are in the tooltip
    Position - the mode for positioning the tooltip. Possible modes are:
    average will place the tooltip at the average position of the items displayed in the tooltip. nearest will place the tooltip at the position of the element closest to the event position. New modes can be defined by adding functions to the Chart.Tooltip.positioners map.
    Rtl - select true for rendering the legends from right to left
    Title Align - the horizontal alignment of the title text lines. The titleAlign, bodyAlign and footerAlign options define the horizontal position of the text lines with respect to the tooltip box. The following values are
    supported: left (default), right, center. These options are only applied to text lines. Color boxes are always aligned to the left edge.
    Title Font Color
    Title Font Size
    Title Font Style
    Title Margin Bottom - the margin to add on the bottom of title section
    Title Spacing - the spacing to add to top and bottom of each title line
    X Padding - the padding to add on left and right of tooltip
    Y Padding - the padding to add on top and bottom of the tooltip.
  • Elements - while chart types provide settings to configure the styling of each dataset, you sometimes want to style all datasets the same way. A common example would be to stroke all of the bars in a bar chart with the same color but change the fill per dataset. Options can be configured for four different types of elements: line, arc, point, and rectangles. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.

πŸ“˜

The Radar and Polar Area charts also allow defining the following advanced properties:

  • Ticks
  • Grid Lines
  • Point Labels
  • Angle Lines

Please check our Chart component documentation to learn more.

🚧

All Elements properties are global properties for the selected Chart type.
If you want to learn more, check the documentation for:

  • Line, Scatter (Line/Point Elements properties)
  • Radar/Bubble (Point Elements properties)
  • Bar, Horizontal Bar (Rectangle Elements properties)
  • Pie/Doughnut/PolarArea (Arc Elements properties).

You can also check the links below to learn more about charts:
Chart documentation: https://www.chartjs.org/
Chart samples: https://www.chartjs.org/samples/latest/.

πŸ“˜

More information about the easing function can be found here:
http://robertpenner.com/easing/;
https://matthewlein.com/tools/ceaser;
https://easings.net/en;
http://sol.gfxile.net/interpolation/.

The Chart component comes with a nested Chart Data component and the X/Y Axes Options components that can be added on clicking the corresponding gear icon within the selected chart.

Chart Data

The Chart Data component properties that are offered for setting heavily depend on what chart type is being defined.

There are also some Chart Data properties that apply to all chart types:

Property Name

Property Description

Data

The list of data value(s).

Legend Label

The label for the dataset which appears in the legend and tooltips.
Not available for Polar Area, Pie and Doughnut chart types.

Order

The drawing order of dataset. Also affects order for stacking, tooltip, and legend.
Not available forPolar Area, Pie and Doughnut chart types.

Axis ID

X Axis ID - the ID of the X-axis to plot this dataset on.
Y Axis ID - the ID of the Y-axis to plot this dataset on.
Not available for Polar Area, Radar, Pie, Doughnut, and Bubble chart types.

πŸ“˜

You can check our Chart component documentation page to learn about the properties specific to different chart types.

Chart Axes Options

Axes are an integral part of a chart. They are used to determine how data maps to a pixel value on the chart. In a cartesian chart, there is one or more X-axis and one or more Y-axis to map points onto the 2-dimensional canvas. These axes are know ascartesian axes.
In a radial chart, such as a radar chart or a polar area chart, there is a single axis that maps points in the angular and radial directions. These are known radial axes. You can learn more about radial charts Axes Options here.

🚧

The scales in Chart.js > v2.0 are significantly more powerful, but also different than those of v1.0.
Multiple X- & Y-axes are supported. A built-in label auto-skip feature detects would be overlapping ticks and labels and removes every nth label to keep things displaying normally.
Scale titles are supported. New scale types can be extended without writing an entirely new chart type.

Click the corresponding gear icon (X or Y) within the selected chart to add a new Axes Options element. Then, select it to get access to its properties.
X/Y Axes Options have the following properties:

Property Name

Property Description

Scales

Display - controls the axis global visibility if set to true.
Id - is used to link datasets and scale axes together. The properties dataset.xAxisID or dataset.yAxisID have to match the scale properties scales.xAxes.id or
scales.yAxes.id. This is especially needed if multi-axes charts are used.
Labels - the labels list: ['Label 1','Label 2','Label 3','Label 4','Label 5']or ['Label 5','Label 1','Label 2','Label 3','Label 1'].
Position - the position of the axis in the chart. The possible values are:
X Axes: top, bottom
Y Axes: left, right.
Stacked - if set to true, data is stacked.
Stacked area charts can be used to show how one data trend is made up of a number of smaller pieces. Bar charts can be configured into stacked bar charts by changing the settings on the X- and Y-axes to enable stacking.

  • Type - the type of the scale to be used: linear, logarithmic, or category:
    Linear scale is used to chart numerical data. It can be placed on either the X- or Y-axis. The scatter chart type automatically configures a line chart to use one of these scales for the X-axis. As the name suggests, linear interpolation is used to determine where a value lies on the axis
    Logarithmic scale is used to chart numerical data. It can be placed on either the X- or Y-axis. As the name suggests, logarithmic interpolation is used to determine where a value lies on the axis
    Category - if global configuration is used, labels are drawn from one of the label arrays included in the chart data. If only data.labels is defined, this will be used. If data.xLabels is defined and the axis is horizontal, this will be used. Similarly, if data.yLabels is defined and the axis is vertical, this property will be used. Using both xLabels and yLabels together can create a chart that uses strings for both the X- and Y-axes.
    Specifying any of the settings above defines the X-axis as the category type if not defined otherwise. For more fine-grained control of category labels it is also possible to add labels as part of the category axis definition. Doing so does not apply the global defaults.

Grid Lines

The grid line configuration is nested under the scale configuration in the gridLines key. It defines options for the grid lines that run perpendicular to the axis.
https://www.chartjs.org/docs/latest/axes/styling.html
Border Dash - the length and spacing of dashes on grid lines.
Color - the grid lines color. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.
Display - if set to false, the grid lines for this axis will not be displayed.
Draw Border - if set to true, the border at the edge between the axis and the chart area is drawn.
Draw On Chart Area - if set to true, the lines on the chart area inside the axis lines are drawn. This is useful when there are multiple axes and you need to control which grid lines are drawn.
Draw Ticks - if set to true, the lines beside the ticks in the axis area beside the chart are drawn.
Line Width - the stroke width of grid lines.
Offset Grid Lines - if set to true, the grid lines will be shifted to locate between the labels. This is set to true for the bar chart by default.
Tick Mark Length - the length in px that the grid lines will draw into the axis area.
Z-Index - z-index of the grid line layer. The values <= 0 are drawn under datasets, those that are `> 0 on top.
Zero Line Border Dash - the length and spacing of dashes of the grid line for the first index (index 0).
Zero Line Color - the stroke color of the grid line for the first index (index 0).
Zero Line Width - the grid line stroke width for the first index (index 0).

Label

Display - if set to true, displays the axis title.
Font Color - the font color for scale title.
Font Size - the font size for scale title.
Font Style - the font style for the scale title, follows the CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
Label String - the text for the title.
Line Height - the height of an individual line of text.
Padding - the padding to apply around scale labels. Only top and bottom are implemented.

Ticks

Auto Skip - if set to true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to maxRotation before skipping any. Turn Auto Skip off to show all labels available.
Auto Skip Padding - the padding between the ticks on the horizontal axis with Auto Skip enabled.
Begin At Zero - if set to true, the scale will include 0 if it is not already included.
Display - controls the axis global visibility (visible when true, hidden when false).
Font Color - the font color for tick labels.
Font Size - the font size for the tick labels.
Font Style - the font style for the tick labels, follows the CSS font-style options.
Label Offset - the distance in px to offset the label from the center point of the tick (in the
X direction for the X-axis, and the Y direction for the Y-axis). Note that this can cause labels at the edges to be cropped by the edge of the canvas.
Line Height - the height of an individual line of text.
Max - the user defined maximum number for the scale, overrides maximum value from data.
Max Rotation - the maximum rotation for tick labels when rotating to condense labels. Rotation doesn't occur until necessary. Only applicable to horizontal scales.
Min - the user defined minimum number for the scale, overrides minimum value from data.
Min Rotation - the minimum rotation for tick labels. Only applicable to horizontal scales.
Mirror- flips tick labels around axis, displaying the labels inside the chart instead of outside. Only applicable to vertical scales.
Padding - the padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.
Precision - if defined with the Step Size property unspecified, the step size will be rounded to this many decimal places.
Reverse - reverses the order of tick labels if set to True.
Sample Size - the number of ticks to examine when deciding how many labels will fit. Setting a smaller value will be faster, but may be less accurate when there is large variability in label length.
Step Size - the user defined fixed step size for the scale.
Ticks Max Ticks Limit - the maximum number of ticks and gridlines to show.
Z-index - z-index of the tick layer. It is used when ticks are drawn on chart area. The values <= 0 are drawn under datasets, those > 0 on top.

🚧

For the linear Axes type Zero Line is 0!

πŸ“˜

You can also check this Appery.io community video that shows how to draw a line chart in an Ionic 4 app.

Checkbox

Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the checked property. They can also be checked programmatically by setting the checked property.

Using Checkbox as a Form Control

🚧

Use the following description only when the Form component has the disabled Native validation property. If the Native validation property is enabled the control can be used as a default HTML Form Control.

To set the initial value of the control, use the Initial Value property of the Form Control properties section. The component can have only boolean (true or false) values. If the property is not specified, the initial value will be set to null.

πŸ“˜

If included in a Form component, Checkbox becomes a Form Control; the Name property should be specified (by default, the Name property is defined as the Component name property, so change it if necessary).

To use variables as the control's data, the advanced property [(ngModel)] should be specified - the variable name should be entered as the property value. It replaces the value that is set by the Initial Value property.

The component can get additional properties (Control ID and Control options) that allow checking the validity, changing updating strategy, etc. These properties can be used if the Native Validation property is disabled for the Form component.

Properties

The Checkbox component has the following properties:

Property Name

Property Description

Indeterminate

If set to True, the checkbox will visually appear as indeterminate. The default is set to false.

Checked

If set to true, the checkbox is selected. The default is set to false.

Name

The name of the control, which is submitted with the form data.

Value

Used as data for forms and groups. The value of the checkbox does not mean if it is checked or not, use the checked property for that.

[(ngModel)]

Angular directive for data binding.

(ionBlur)

The event emitted when the toggle loses focus.

(ionChange)

The event emitted when the checked property has changed.

(ionFocus)

The event emitted when the toggle has focus.

DataTable

The DataTable component consists of DataTableCols the number of which can be changed by adding or cloning.
The DataTable component has the following properties:

Property Name

Property Description

Column Mode

Column modes allow having a variety of different ways to apply column width distribution to the columns using:
Standard - columns are distributed given the width is defined in the column options;
Flex - distributes the width's grow factor relative to other columns. It works the same as the flex-grow API in CSS. Basically, it takes any available extra width and distributes it proportionally according to each column's Flex Grow value. Flex is not suggested when the ScrollbarH property is set to True;
Force forces the widths of the columns to distribute equally but overflows when the min-width of each column is reached. Force is usually the ideal column distribution method when columns do not need to be fixed-sized.

Count

Enter the number to set the total count of all rows. The default is set to 0.
The property is necessary for correct rows displaying in infinite scroll modes and for calculations for page navigation.
Required if the Data Mode property is set to Server Pages or Server Infinite. If the Data Mode property is set to Client Pagesor Client Infinite, Count will be automaticallycalculated as the length of `Rows data.

Css Classes

Custom CSS classes that can be defined to override the icons classes for up/down in sorts and previous/next in the pager.
If entered, custom classes for icons will replace existing classes.
Value types:
Pager Left Arrow - the default value is set to datatable-icon-left;
Pager Next - the default value is set to datatable-icon-skip;
Pager Previous - the default value is set to datatable-icon-prev;
Pager Right Arrow - the default value is set to datatable-icon-right;
Sort Ascending - the default value is set to datatable-icon-down;
Sort Descending - the default value is set to datatable-icon-up.

Data Mode

Data source.
Mode: Client Pages, Client Infinite, Server Pages, or Server Infinite.
Service Name - the service to be linked with the datatable to return data. It is created after a datasource is added under the DATA tab.

Display Check

Can be used to check whether you want to show the checkbox for a particular row based on some criteria.
Create a new function under the DATA tab of the Visual Editor and choose the created function for the property.

(row, column, value) => {
    return row.name !== 'Ethel Price';
}

External Sorting

To be used instead of client-side sorting. The default is set to False.

Footer Height

The minimum footer height in pixels. This property is used for calculating the dimensions of the table size.
Pass false value for no footer.

Header Hight

Minimum header height in pixels.
Header Height can`t be auto when ScrollbarV is True or Data Mode is Client Infinite or Server Infinite or theScrollbarV property is set to True. It is automatically changed to undefined from auto if the properties above are set.

Limit

Is necessary for calculating sizes (rows count) of the page and for pagination.
If not defined, Limit will be calculated as the length of Rows data (one page with all rows data).

Messages

Static messages in the table that can be overridden for localization.
Value types:
Empty Message - a message to show when an array with no values is presented;
Selected Message - footer selected message;
Total Message - footer whole message.

Offset

The current offset ( page - 1 ) is shown.
The property is necessary for calculating the number of the current page. In this case, it will be the Offset property increased by 1.
Should be set if the number of the first page differs from the default,

Reorderable

Enables/disables the ability to re-order columns by dragging them. Value type: boolean. The default value is set to True.

Row Class

The function used to populate a row's CSS class. The function will take a row and return a string or object. The value type is Function.
It makes adding custom classes depending on specific conditions possible.
Create a new function under the CODE tab of the Visual Editor and choose the created function for the property.

(row) => {
  return {
    'old': row.age > 50,
    'young': row.age <= 50,
    'woman': row.gender === 'female',
    'man': row.gender === 'male'
  }
}

Row Height

Is necessary for calculating the sizes of the page when infinite scrolling is used and it is optional for pagination mode.
The default value is auto for Client Pages / Server Pages and 50 for Client Infinite / Server Infinite.
When infinite scrolling is not used, pass undefined for fluid heights.
If infinite scrolling is used, pass a number to calculate the heights.
Row Height can`t be auto when the Data Modeproperty is set to Client Infinite or Server Infinite or theScrollbarV property is set to True. It is automatically changed to undefined from auto if the properties above are set.

Rows

An array of rows to display (variable or mapping).
Value type: Array. The default value is set to [].
There are two ways to set the data source for Rows:
Define a variable under the CODE tab with data. Then choose the variable as the value for the property Rows;
Use the DATA tab to map service data to the Rows property.

ScrollbarH

Enables / disables horizontal scrollbars. The default value is set to False.

ScrollbarV

Is necessary for infinite scrolling. Setting the property to True resets the Row Height and Header Height properties from auto to undefined because there are required defined heights values for correct table calculations. The default value is set to False.

Selection Type

The type of row selection. The value types are
Single - one row can be selected at a time;
Cell - one cell can be selected at a time; Multi - multiple rows can be selected using Ctrl or Shift keys;
MultiClick - multiple rows can be selected by clicking;
Checkbox - multiple rows can be selected using checkboxes.

Sorts

Is used to determine the default column for sorting. The default is set to empty (unsorted).
Column Name - enter text to name a column.
Direction - set the sorting direction: asc (ascending) or desc (descending).

Table Height

Sets the height of a datatable in the percentage of viewport height. It means appending a special CSS class with needed styles. It will be changed to 100 % automatically when the Data Mode property is set to Client Infinite or Server Infinite or the ScrollbarV property is defined as True.

  • 25 % - 25vh
  • 33 % - 33vh
  • 50 % - 50vh
  • 66 % - 66vh
  • 75 % - 75vh
  • 100 % - 100vh.

Theme

Sets the default style of a datatable. It means appending a special CSS class of a predefined theme to the datatable element. The value types are Material (default), Dark, Bootstrap.

(select)

Action to be triggered when the component is selected.

πŸ“˜

Please check these tutorials that explain how to use ngx-datatable in Ionic 4 apps:
https://docs.appery.io/docs/ionic-4-ngx-datatable-sample-tutorials.

DataTableCol

To add a DataTableCol, click the + button on the DataTable.
The DataTableCol component has the following properties:

Property Name

Property Description

Can Auto Resize

Whether the column can automatically resize to fill extra space. The default is set to True.

Cell Class

Cell classes to apply to the body cell.

Cell template

Click the Edit button to access the HTML editor. Angular TemplateRef allows authoring custom body cell templates.

Checkboxable

Indicates whether the column should show a checkbox component for selection. Only applicable when the selection mode is Checkbox.

Draggable

Defines if the column can be dragged to re-order. The default is set to True.

Flex Grow

The grow factor relative to other columns. Same as the flex-grow API. It will any available extra width and distribute it proportionally according to all columns' flexGrow values. The default is set to 0.

Frozen Left

Determines if the column is frozen to the left.

Frozen Right

Determines if the column is frozen to the right.

Header Checkboxable

Indicates whether the column should show a checkbox component in the header cell. Only applicable when the selection mode is Checkbox.

Header Class

Header CSS classes to apply to the header cell.

Header Template

Click the Edit button to access the HTML editor. Angular TemplateRef allows authoring custom header cell templates.

Max Width

The maximum width of the column in pixels.

Min Width

The minimum width of the column in pixels. The default is set to 100.

Name

Column label. If none is specified, it will use the prop value and decimalize it.

Property

The property to bind the row values to. If undefined, it will camelcase the name value.

Resizeable

The column can be resized manually by the user. The default is set to True.

Sortable

Sorting of the row values by this column. The default is set to True.

Width

The width of the column by default in pixels. The default is set to 150.

Datetime

The Datetime component is used to present an interface that makes it easy for users to select dates and times.
The Datetime component has the following properties:

Property Name

Property Description

Value

The value of the datetime as a valid ISO 8601 datetime string.
Click the Calendar icon to set the needed value.

Placeholder

Instructional text that shows before the datetime has a value.

Disabled

Every component on the page is enabled by default. You may need to disable components.
If set to true, the user cannot interact with the component. The default is set to False.

Readonly

If set to True, the value can not be modified. The default is set to False.

Min

The minimum datetime allowed. Click the Calendar icon to set the needed value.

Max

The maximum datetime allowed. Click the Calendar icon to set the needed value.

Display Format

The display format of the date and time as text that shows within the item. Select the appropriate from the dropdown or enter your value.

Picker

Add a picker to the datetime. The value types are:
Cancel text- the text to display on the picker's cancel button.
Done Text - the text to display on the picker's done button.
Picker Format - the format of the date and time picker columns the user selects. Select the needed format from the dropdown or enter your value.
Picker Options - any additional options that the picker interface can accept.

Year Values

Comma-separated values used to create the list of selectable years.

Month

Month picker options:
Names - full comma-separated names for each month's name. This can be used to provide locale month names. Defaults are set to English.
Short Names - short comma-separated abbreviated names for each month's name. This can be used to provide locale month names. Defaults to English. Defaults to English.
Values- comma-separated values used to create the list of selectable months.

Day

Day picker options:
Names - full comma-separated names for each month's name. This can be used to provide locale month names. Defaults are set to English.
Short Names - short abbreviated day of the week comma-separated names. This can be used to provide locale names for each day in the week. Defaults are set to English.
Values - comma-separated values used to create the list of selectable days.

Hour Values

Comma-separated values used to create the list of selectable hours.

Minute Values

Comma-separated values used to create the list of selectable minutes.

Slot

Position inside another component: Start or End.

[(ngModel)]

Angular directive for data binding.

(ionChange)

The event emitted when the value has changed.

When the Item Wrapped property is set to True, the component will be included in the Item with additional properties:

Property Name

Property Description

Item Wrapper

If the item wrapper features are used, the input will be wrapped in tag.
Color - item wrapper Ionic 4 color.
Disabled - if set to true, the user cannot interact with the component. The default is set to False.
Lines - defines how the bottom border should be displayed on the item. The available options are Full, Inset or None.
Mode - determines which platform styles to use. Possible values are iOS or MD.
Class - defines equal styles for elements with the same class name.
Slot - position inside another component: Fixed.

Label

Label properties:
Text - label text.
Position - determines where and how the label behaves inside an item. The possible values are Fixed, Stacked, or Floating.
Color - label Ionic 4 color.
Mode - determines which platform styles to use. Possible values are iOS or MD.
Slot - label position in tag (Start or End).

Reorder

Reorder properties:
Type - Content or Wrapper. If Wrapper is used, the item will be wrapped into a reorder tag.
Icon - custom icon for Reorder with a type Content. Click the Default icon button to select the needed icon.
Slot - position inside the item: Start or End.
Custom SVG Icon - used to select an svg file. This path will be added as the src attribute. Click the Change button to select the uploaded image from Media Manager.

Every new Datetime component is created with a default label and the current time value.

πŸ“˜

Datetime becomes a Form Control if included in a Form component and if it has the property Name specified. By default, the Name property is set as the Component name property. Change it to your name if it is necessary.

Visit the Ionic documentation to read more about Datetime.

Form

Handling user input with forms is the cornerstone of many common applications. Applications use forms to enable users to log in, update a profile, enter sensitive information, or to perform many other data-entry tasks.

The Form component is based on Angular template-driven forms.

Composition

The Form is a container including Form Control like Input, Radiobutton, Checkbox, Select etc.).
To create a Form Control, drag & drop a needed component from the components PALETTE of the Visual Editor.

🚧

The added component will become a Form Control only when the property Name is specified which defines control data key.
For example, we have an Input with defined Name = userName and value = Peter. In this case, the control data will be available as the property of the form data object: {userName: 'Peter'}.

Sending data

There are two ways to send form data:

  1. Including the special Submit control. The control has to be placed inside the form:
<form>
    <ion-button type="submit">Submit</ion-button>
</form>
  1. Using the Form submit action on the EVENTS panel. The control can be placed everywhere on the page.

Actions at the form submitting can be specified in three ways:

  1. Using the Form submit event of the form component on the EVENTS panel (for beginners). In this case, a user can choose an action to be executed at the form submitting. For example, such action can be Invoke service (e.g. Login service) with specified mapping on the DATA tab.
  2. Using the (ngSubmit) event of the component (for advanced users). In this case, a user has to define a function - handler which will execute submitting from custom code.
  3. Using the Action property of the component (for advanced users). In this case, a user has to define the URL where form data will be sent.

Validation

By default, Ionic has own validation rules for controls included in the form. If you want to use the validity of the form in general, specify the property Form ID.
The word passed as the value of the property can be used as a variable containing information about the form. Such usage is described in the PROPERTIES section:
The Form ID property can be used as the variable containing the Form state (e.g. formID.valid and formID.value). To use it in custom code, add 'this.' prefix.

Form and Controls have different states when Ionic validation is used.

State

Description

valid

A control is considered valid if no validation errors exist with the current value. If the control is not present, null is returned.

invalid

An error exists in the input value. If the control is not present, null is returned.

pending

Async validation is occurring and errors are not yet available for the input value. If the control is not present, null is returned.

disabled

The control is disabled in the UI and is exempt from validation checks and excluded from aggregate values of ancestor controls. If the control is not present, null is returned.

enabled

The control is included in ancestor calculations of validity or value. If the control is not present, null is returned.

pristine

The user has not yet changed the value in the UI. If the control is not present, null is returned.

dirty

The user has changed the value in the UI. If the control is not present, null is returned.

touched

The user has triggered a blur event on it. If the control is not present, null is returned.

untouched

The user has not yet triggered a blur event on it. If the control is not present, null is returned.

errors

Reports the control's validation errors.

For example, check using the invalid input state to show an error message: <ion-text *ngIf="user.invalid" color="danger">Incorrect user name</ion-text>. In this case, user is a Control ID defined for the Input component.
If you need to use validation to specific errors, use the errors state with specifying the type of a validation error.

Let's see how different error messages at the Input component validation are displayed.
Define the Control ID property of the Input with the passControl value and set its validation (to required and pattern="[0-9]*", for example).
Add two components containing error messages and add the *ngIf directive as an advanced property with the value that is a condition for displaying the error component. The directive is used to show/hide components depending on a directive boolean value.

If the component is valid, the expression passControl.errors will return null (equal to false).
If the component is invalid, the expression passControl.errors will return the object containing all validation errors available by their names. The existence of a necessary error name in the returned errors object is used for the condition of displaying the error message.

<form #myForm="ngForm">
    <ion-input required pattern="[0-9]*" #passControl="ngModel" [ngModel] name="pass"></ion-input>
    <ion-text *ngIf="passControl.errors && passControl.errors.required" color="danger">Value has to be entered</ion-text>
    <ion-text *ngIf="passControl.errors && passControl.errors.pattern" color="danger">Value should contain only numbers</ion-text>
</form>

Properties

Novalidate

This boolean attribute indicates that the form shouldn't be validated when submitted.

Native validation

If set to True, native HTML5 validation is used instead of Angular validation. The form will work as the default HTML

.

Form ID

A unique word identifying the component (Template reference variable) that contains current form information. Used in component's properties as a variable containing the form state.

Update On

Controls when the value or the validity is updated: Change, Blur, Submit

Features

Advanced options containing default HTML form attributes.

  • Action - the URL that processes the form submission. Specifies where to send the form-data when a form is submitted. Disabled if Form submit or (ngSubmit) is used.
  • Enctype - specifies how the form-data should be encoded when submitting it to the server (only if Method is set to post).
    The Enctype property has the following options:
    application/x-www-form-urlencoded - default. All characters are encoded before sent (spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values);
    multipart/form-data - no characters are encoded. This value is required when you are using forms that have a file upload control;
    text/plain - spaces are converted to + symbols, but no special characters are encoded.
  • Method specifies the HTTP method (get or post) to use when sending form-data:
    get appends form-data into the URL in name/value pairs.
    The length of a URL is limited (about 3000 characters).
    Never use GET to send sensitive data! (will be visible in the URL), it is better used for non-secure data, like query strings in Google.
    Useful for form submissions where a user wants to bookmark the result.
    post appends form-data inside the body of the HTTP request (data is not shown in URL). It has no size limitations.
    Form submissions with POST cannot be bookmarked.
  • Target specifies where to display the response that is received after submitting the form:
    Blank - the response is displayed in a new window or tab.
    Self - the response is displayed in the same frame (default);
    Parent - the response is displayed in the parent frame.
    Top - the response is displayed in the full body of the window.

(ngSubmit)

The event emitted when the form is submitted.
The event Form submit takes precedence over the Action property.

🚧

In the initial state of the component, the default HTML <form> features (Action, Target, etc.) are not supported because they are replaced with Angular functionality. To disable Angular functionality and enable default HTML behavior of the component, enable the Native validation property.

The Form ID property can be used in template or code as a variable containing information about the form:

formID = {
    value: boolean,   // Reports the value of the form
    valid: boolean,   // Reports whether the form is valid. A form is considered valid if no validation errors exist with the current value
    invalid: boolean, // Reports whether the form is invalid, meaning that an error exists in the value
    dirty: boolean    // Reports whether the form is dirty, meaning that the user has changed the value in the UI
  }

In templates, the Form ID property is used as a variable. It can be also passed as a function argument:

<ion-button disabled={{formID.invalid}} type="submit">Submit</ion-button>
  <ion-button (click)="send(formID)">Send</ion-button>

To be used in custom code, the variable is available as this.<Form ID>:

if (this.formID.valid) this.submit();

πŸ“˜

Please, go to this page to check the sample Ionic 4 apps that use Form Control to perform specific data-entry tasks.

Google Map

The Google Map component allows you to embed Google Maps into your app.

πŸ“˜

Google Maps web browser API key is required for the component to work properly. Set the Google API Key on the App Settings page of your app.

The Google Map component has the following properties:

Property Name

Property Description

Disable Zoom

If set to True, the map zoom cannot be used when double-clicking. Defaults are set to False.

Full Screen Control

The initial enabled/disabled state of the fullscreen control.

Gesture Handling

Controls how gestures on the map are handled. Allowed values are cooperative, greedy, none, auto. The default is set to auto.

Map Draggable

Enable to make the map draggable.

Map Type

The map MapType ID. The allowed values are roadmap (default), hybrid, satellite, terrain, string.

Scrollwheel

The Scrollwheel property set to true/false enables/disables the scroll wheel to scale the Google Map.
The Scrollwheel property with a null value is used for working Gesture Handling property with a cooperative value.
Scrollwheel is enabled by default.

Viewpoint

Google Map Marker position properties:
Latitude defines the latitude position of the marker.
Longitude defines the longitude position of the marker.

Zoom

The zoom level of the map. The default zoom level is set to 8.

Zoom Control

The enabled/disabled state of zoom control.
If set to True (default), the zoom control can be used on the map.

πŸ“˜

Note

Use the agm-map prefix to increase the priority of your custom classes.

Example: agm-map.map {.....}

Visit the Angular+ Google Map Documentation to read more about Angular+ Google Map.
Visit the Google Map JS API Documentation to read more about Google Map JS API.

πŸ“˜

Want to know more?

You can also check this document on the Google Map component sample app demonstrating how to use this component in an Ionic 4 app.

Read more about the Google Map properties here.

πŸ“˜

You might also like this Appery.io Community video that shows how to create an Ionic 4 application for choosing the best place for a party (using the voting functionality) by using the Google Map component:

Marker

The Marker component has the following properties:

Property Name

Property Description

Add Info Window

If set to True, an information window will be added to the marker.

Coords

Google Map marker position.
latitude - the latitude position of the marker.
longitude - the longitude position of the marker.

Marker Clickable

If set to True, the marker can be clicked. The default value is set to true.

Marker Draggable

If set to True, the marker becomes draggable. The default value is set to false.

Open Info Window

If set to True (default), the info window will automatically open when the marker is clicked.

πŸ“˜

Info Window displays content (usually text or images) in a popup window above the map, at a given location. The info window has a content area and a tapered stem. The tip of the stem is attached to a mark on the map.

More details about Google Map Marker directives can be found here.

Google Map Window

Click the + button on the Marker (Ionic4GoogleMapMarkerBean region) to add a new Google Map Window.
The Google Map Window component has the following properties:

Property Name

Property Description

disableAutoPan

Disable auto-pan on open. By default, the info window will pan the map so that it is fully visible when it opens.

isOpen

Sets the open state for the info window.

maxWidth

The maximum width of the info window, regardless of content width. This value is only considered if set before a call to open.

zIndex

All info windows are displayed on the map in order of their zIndex, with higher values displaying in front of info windows with lower values.

🚧

Setting the addInfoWindow property to False will remove the Google Map Window from the Marker (Ionic4GoogleMapMarkerBean region).

Here is more information about Google Map Window properties.

You might also like our Appery.io Community video that shows how to use the Google Maps component to get current geolocation with Appery.io Geo Service plugin:

Grid

The Grid component is a powerful mobile-first flexbox system for building custom layouts.
It is composed of three units β€” Grid, Row(s) and Cell(s). Cells will expand to fill the row and will resize to fit additional cells. It is based on a 12 cell layout with different breakpoints based on the screen size. The number of cells can be customized by using CSS.
Grid has the following properties:

Property Name

Property Description

Fixed

If set to True, the grid will have a fixed width based on the screen size. The default is set to false.

Grid

If set to False, rows are used without a grid. The default is set to true.

Padding

Adds paddings to the grid and immediate children columns. The possible values are Padding, No Padding, Padding Top, Padding Start, Padding End, Padding Bottom, Padding Vertical, Padding Horizontal.

Visit the Ionic 4 documentation to read more about Grids.

πŸ“˜

When working with the Grid component, pay attention to the Breadcrumbs above the phone frame.

Grid Row

To add a Grid Row, click the + button on the Grid. By default, a new row with two Grid Cells will be created.
The Grid Row component has the following properties:

Property Name

Property Description

Align items

Vertical alignment of all cells (start, center, end, stretch, baseline), unless they specify their own alignment.

Flex Wrap

Wrapping of cells: wrap, nowrap - forces the cells to a single row, or wrap reverse - the cells will wrap in reverse.

Justify Content

Horizontal alignment of all cells (start, center, end, space-around, space-between, space-evenly).

Here is more information about a Grid Row.

Grid Cell

Click the + button on the selected Grid Row to add new Grid Cell.
The Grid Cell component has the following properties:

Property Name

Property Description

Align Self

Vertical alignment of all columns (start, center, end, stretch, baseline), unless they specify their own alignment.

Offset

The amount to offset the column, in terms of how many columns it should shift to the right of the total available.
Offset - the offset of the cell for all screens.
Offset Lg - the offset of the cell for Lg screens
Offset Md - the offset of the cell for Md screens
Offset Sm - the offset of the cell for Sm screens
Offset Xl - the offset of the cell for Xl screens
Offset Xs -the offset of the cell for Xs screens.

Padding

Adds paddings to the cell:
Padding, No Padding, Padding Top, Padding Start, Padding End, Padding Bottom, Padding Vertical, Padding Horizontal.

Pull

The amount to pull the cell, in terms of how many cells it should shift to the left of the total available.
Pull - the pull of the cell for all screens.
Pull Lg - the pull of the cell for Lg screens
Pull Md - the pull of the cell for Md screens
Pull Sm - the pull of the cell for Sm screens
Pull Xl - the pull of the cell for Xl screens
Pull Xs - the pull of the cell for Xs screens.

Push

The amount to push the cell, in terms of how many cells it should shift to the right of the total available.
Push - the push of the cell for all screens.
Push Lg - the push of the cell for Lg screens
Push Md - the push of the cell for Md screens
Push Sm - the push of the cell for Sm screens
Push Xl - the push of the cell for Xl screens
Push Xs - the push of the cell for Xs screens.

Size

The size of the cell, in terms of how many cells it should take up out of the total available. If auto is passed, the cell will be the size of its content.
Size - the size of the cell for all screens.
Size Lg - the size of the cell for Lg screens
Size Md - the size of the cell for Md screens
Size Sm - the size of the cell for Sm screens
Size Xl - the size of the cell for Xl screens
Size Xs - the size of the cell for Xs screens.

Text Alignment

Aligns the inline contents.
Possible values are text-left, text-right, text-start. text-end, text-center, text-justify.
Read more about Text Alignment.

πŸ“˜

Specific properties are used to set values based on screen sizes (e.g. Pull Sm means that the property Pull will be applied if screen sizes are Sm and larger).

Screen sizes:
xs - 0px;
sm - 576px;
md - 768px;
lg - 992px;
xl - 1200px.

Here is more information about Grid Cell.

πŸ“˜

You can check this tutorial to learn how the Grid component can be used in Appery.io.

Html

The HTML component allows inserting custom tags and has the following properties:

Property Name

Property Description

Container

Sets an HTML element used as the wrapper for content: No wrapper, div, span.

HTML

Contents of the HTML component.
Click the Edit button to open the HTML editor.

Wrapper Style

Use it to style the HTML component with custom components inside so that the page appearance in the Visual Editor corresponds to the page appearance on the preview.
Color
CSS Style
Display (block, inline-block, inline, flex)
Height (in px or %)
Width (in px or %).
It is used only inside the Visual Editor and does not have any reflection in the application.

πŸ“˜

The property Container is just a component container.

You can use a special keyword %children% to insert child components in the middle of HTML content.

Icon

Ionicons is a completely open-source icon set with 700+ icons crafted for web, iOS, Android, and desktop apps. Ionicons was built for Ionic Framework, so icons have both Material Design and iOS versions. When used with Ionic, the <ion-icon> component will automatically use the correct version based on your platform. Additionally, when used outside of Ionic, both iOS and MD platforms can be chosen by the application.

The Icon component has the following properties:

Property Name

Property Description

Custom SVG Icon

Allows selecting a custom icon svg, puts it's Url in the <src> attribute. The external file can only be a valid svg and does not allow scripts or events within the svg element.

Name

Ionic 4 icons. Defaults are to logo-ionic.

Size

The icon size. Possible values are: Small or Large.

Visit the Ionic 4 documentation to learn more about Icons.

Image

Image is a tag that will lazily load an image whenever the tag is in the view port. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses Intersection Observer internally, which is supported in most modern browsers, but falls back to a set timeout when it is not supported.

The Image component has the following properties:

Property Name

Property Description

Alt. Text

This attribute defines the alternative text describing the image.

Image

Click the Change button to select the uploaded image from Media Manager.

Ionic Image

If set to True, image tag <img> will be changed to Ionic 4 image tag <ion-img>. The default: is set to True.

Responsive

If set to True, automatically adjusts to fit the screen size. The default: is set to False.

Shape

The propeties Responsive and Shape don`t work when Ionic Image is set to True or Wrapper is defined as Avatar or Thumbnail.

Slot

Label position in the ion-item` tag (None, Start or End).

Wrapper

Choose Ionic 4 tag (ion-avatar or ion-thumbnail) that will be used as wrapper of a default image.

πŸ“˜

Properties Responsive and Shape work only for default images but not for Ionic 4 images and wrapped images.

Visit the Ionic documentation to read more about Images.

Input

The Input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input does and works great on desktop devices and integrates with the mobile devices keyboards.

Using Input as a Form Control

πŸ“˜

Use the following description only when the Form component has the disabled Native Validation property. With the Native Validation property enabled, the control can be used as a default HTML Form Control.

Input becomes a Form Control if it is included in a Form component and has the specified Name property. By default, the Name property is set as the Component name property but can be changed.

To set the control initial value, use the Initial Value property of the Form Control properties section. The component can have only string values or null. If the property isn't specified, the initial value will be null.

For using variables as the control's data the advanced property [(ngModel)] should be specified - the variable name should be entered as the property value. It replaces the value that is set by the Initial Value property.

The component gets additional properties (Control ID and Control options) that allow checking the validity, changing updating strategy, etc. These properties can be used only in the Form component doesn't have Native Validation enabled.

The Input component has the following properties:

Property Name

Property Description

Value

Input value.

Placeholder

Instructional text that shows before the input has a value.

Name

The name of the control, which is submitted with the form data.

Readonly

If set to True, the value can not be modified. The default is set to False.

Required

If set to True, a value must be passed before submitting a form.

Type

The type of control to display. The possible values are Text (default), Password, Email, Number, Search, Tel, URL, Date, Time or File.

Features

Accept - if the value of the type attribute is File, this attribute will indicate the types of files acceptable by the server, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.
Autocapitalize - indicates whether and how the text value should be automatically capitalized while being entered/edited. The default is set to None.
Autocomplete - indicates whether the value of the control can be automatically completed by the browser. The default: is set to Off.
Autocorrect - whether auto-correction should be enabled while the text value is being entered/edited. The default is set to Off.
Autofocus - this boolean attribute allows specifying that a Form Control should have input focus when the page loads. The default is set to False.
Clear Input - if set to True, a clear icon will appear in the input when there is a value. Clicking it clears the input. The default is set to False.
Clear On Edit - if set to True, the value will be cleared after focus upon editing. Defaults are set to true when type is Password or False for all other types.
Max - the maximum value, which must not be less than its minimum (min attribute) value.
Maxlength - if the value of the type attribute is Text, Email, Search, Password, tel or URL, this attribute specifies the maximum number of characters to be entered.
Min - the minimum value, which must not be greater than its maximum (max attribute) value.
Minlength - if the value of the type attribute is Text, Email, Search, Password, tel or URL, this attribute specifies the minimum number of characters to be entered.
Multiple - if set to True, more than one value can be entered. This attribute applies when the type attribute is set to Email or File, otherwise it is ignored.
Pattern - a regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to get help. This attribute applies when the value of the type attribute is Text, Search, Tel, URL, Email, or Password, otherwise it is ignored.
Spellcheck - to check the element's spelling and grammar, set to True. The default is set to False.
Step - works with the min and max attributes to limit the increments at which a value can be set. Possible values are any or a positive floating point number.

[(ngModel)]

Angular directive for data binding.

(ionChange)

The event emitted when the value has changed.

(ionFocus)

The event emitted when the input has focus.

(ionInput)

The event emitted when the value has changed.

When the Item Wrapped property is set to True, the component will be included in the Item with additional properties:

Property Name

Property Description

Item Wrapper

If the item wrapper features are used, the input will be wrapped in the ion-item tag.
Color - item wrapper Ionic 4 color.
Lines - how the bottom border should be displayed on the item. Available options are Full, Inset or None.
Mode - determines which platform styles to use. Possible values are iOS or MD.

Icon

Button Ionic 4 icon.
Name - allows changing Ionic 4 icon style dynamically by property binding to [name]. You can use string (Ionic 4 Icon name e.g. star) or variable names.
Class - icon CSS classes.
Color - icon color.
Slot - icon position in the ion-item tag (Start or End).
Style - Ionic 4 icons.
Custom SVG Icon - select an svg file. This path will be added as the src attribute.

Label

If label is used, the input will be wrapped in the <ion-item> tag.
Text - label text.
Color - label Ionic color.
Position - determines where and how the label behaves inside an item. The possible values are Inline, Fixed, Stacked or Floating.
Slot- label position in the ion-item tag (Start or End).
Mode - label mode.

Reorder

Reorder properties:
Icon - custom icon for reorder with a type Content.
Click the Default icon button to select the needed icon.
Type - if set to Wrapper, the item will be wrapped into a reorder tag.

The date value is always formatted as yyyy-mm-dd.

Visit the Ionic 4 documentation to read more about Inputs.

Link

The Link component is used for navigating to a specified link. The component is based on Angular routing.

πŸ“˜

To enable using the Link component, the project routes should be specified. They can be defined in the Project settings under the Routing tab. The specified router names will be displayed in the dropdown list of the Route Name property.

By default, the Link component has the following properties:

Property Name

Property Description

Route Name

List of routes names defined on the Routing tab.

Route Params

Sets the value of Route Params to pass some parameters in URL at navigation. Several values should be separated with commas (param1, param2, ...).

Text

The displayed link text.

Preset Mode

Specifies a mode with the properties that can be set.
There are different tags to be used for the link depending on the chosen Preset mode:
Ionic 4 - ion-text. It allows using such Ionic 4 features as Color, Mode or Router Direction;
Custom - a, p, span, div.

(click)

The event emitted when the link is clicked.

🚧

Using tags can be changed with the Container property. Only Ionic 4 components (beginning with ion- prefix) names can be used if the Ionic 4 mode is chosen.

The list of displayed properties can be expanded by choosing another Preset mode:
Ionic 4:

Container

Ionic 4 component used as the link.

Router Direction

When using a router, specifies the transition direction when navigating to another page.

The Custom Preset Mode properties are the following:

Href

Contains a URL or a URL fragment that the hyperlink points to.
If this property is set, an anchor tag will be rendered.

Container

HTML tag used for the link: a, p, span, div.

Target

Specifies where to display the linked URL. Only applies when an href is provided: Blank, Self, Parent, Top.

Rel

Specifies the relationship of the target object to the link object.

Download

This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name.

List

The List component has the following properties:

Property Name

Property Description

Inset

If set to true, the list will have a margin around it and rounded corners.

Lines

Defines how the bottom border should be displayed on the item: Full, Inset, None.

By default, any new List component contains two List Items. To add a new List Item, click the + button inside the List.

πŸ“˜

You can check this tutorial to learn how to build an Appery.io mobile app that displays a list of data from a cloud database.

List Item

The List Item component has the following properties:

Property Name

Property Description

Button

If set to true, a button tag will be rendered and the item will be tappable.

Detail

If set to true, a detail arrow will appear on the item

Detail Icon

The icon to use when Detail is set to true.
Click the Default icon button to select a needed icon.

Features

Item Type - used to change the item role (change Ionic 4 component): Item, Item Divider, Item Sliding, Item Group, Radio Group, Reorder Group, List Header.
Reorder Disabled - if set to true, the items reordering inside the reorder group will be disabled.
Sliding Slide - used for item sliding: Start, End, *Both**. Reorder group will be disabled.
Sticky - if set to true, the item-divider will stay visible when it reaches the top of the viewport until the next ion-item-divider replaces it

Label

If set to true, adds a label to the list Item.

Lines

Defines how the bottom border should be displayed on the item: Full, Inset, None.

Link Features

Options for the component used as a link:
Download - this attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name
Href - specifies the relationship of the target object to the link object.
Ref - specifies the relationship of the target object to the link object.
Target - specifies where to display the linked URL. Only applies when an href is provided: Blank, Self, Parent, Top.
Type - the type of the button: Submit, Reset, Button.

Radio Group

Allow Empty Selection - if set to true, the radios can be deselected.
Name - the name of the control, which is submitted with the form data
Value - the value of the radiogroup.

Reorder

Icon - custom icon for reorder with the type Content.
Type - Content or Wrapper. If Wrapper is used, the item will be wrapped into a reorder tag.

Routing

Route Name - list of routes names from the Routing panel.
Route Params - adds values for Route Params described in the Routing panel.
Router Direction - when using a router, it specifies the transition direction when navigating to another page using href: back, forward, root.

Sliding State

Switches a state of item sliding in the Visual Editor: Swipe Right or Swipe Left.

The property's Detail defaults are set to false unless the Mode is iOS and an Href, onclick or Button property is present.

The property Type is only used when an onclick or Button property is present.

The property Sliding State is used only in the Visual Editor to switch a state of Item Sliding. Use a doubleclick on the item Sliding to do the same action.

Navigation with Routing has a higher priority than Href.
The Item Label component has the following properties:

Property Name

Property Description

Position

The position determines where and how the label behaves inside an item: Fixed, Stacked or Floating.

Text

List item label text.

πŸ“˜

If you are interested in the detailed video tutorial that shows how to create a List - Details mobile application, please check this Appery.io Community link.

Visit the Ionic 4 documentation to read more about lists.

Radiobutton

Radiobuttons are generally used as a set of related options inside of a group, but they can also be used alone. Pressing on a radiobutton will check it. They can also be checked programmatically by setting the Checked property.
An ion-radio-group can be used to group a set of radiobuttons (or radios). When radios are inside of a radio group, only one radiobutton in the group will be checked at any time. Pressing a radiobutton will check it and uncheck the previously selected radiobutton, if there is one. If a radiobutton is not in a group with another radiobutton, then both radiobuttonss will have the ability to be checked at the same time.

Mapping

There is a possibility to use mapping to the Checked property of the component.
Such binding is used only for initializing the component when created dynamically.
If it is necessary to use dynamic changing of the checked state, the value of the checked button should be bound to the Value property of the Radio Group component in the mapping.

<ion-radio-group value="value2">
  <ion-radio value="value1"></ion-radio>
  <ion-radio value="value2"></ion-radio>
  <ion-radio value="value3"></ion-radio>
</ion-radio-group>

In this case, to check the value2 button by mapping, the binding to the Value property of the Radio Group component should return a string value2 which is equal to the Value property of the button.

The Radiobutton component has the following properties:

Property Name

Property Description

Value

The value of the input.

Checked

If set to true, the element is selected.

Name

The name of the control, which is submitted with the form data.

Slot

Radiobutton position in the <ion-item> tag (Start or End).

[(ngModel)]

Angular directive for data binding.

(ionSelect)

The event emitted when the radiobutton is selected.

When the Item Wrapped property is set to True, the component will be included in the Item with additional properties:

Property Name

Property Description

Item Wrapper

If the item wrapper features are used, the input will be wrapped in the <ion-item> tag.
Lines - define how the bottom border should be displayed on the item. The available options are Full, Inset or None.
Mode - label mode.
Slot - position inside another component.

Label

If the label is used, the input will be wrapped in the <ion-item> tag.
Text - label text.
Position - determines where and how the label behaves inside an item. The possible values are Inline, Fixed, Stacked or Floating.
Color - label Ionic 4 color.

Reorder

Reorder properties:
Type - Content or Wrapper. If Wrapper is used, the item will be wrapped into the reorder tag.
Icon - custom icon for reorder with type Content.
Slot - position inside the item.
Custom SVG Icon - an svg file can be selected. This path will be added as the src attribute.

πŸ“˜

Using the following properties makes Radiobutton to a List Item:

  • Label Text is not empty;
  • Item Wrapper Color or Lines are set;
  • Reorder Type is Content or Wrapper.

Visit the Ionic 4 documentation to read more about Radiobuttons.

RadioGroup

The RadioGroup is a group of radiobuttons. It allows a user to select at most one radiobutton from a set. Checking one Radiobutton that belongs to a radio group unchecks any previously checked radiobutton within the same group.

The RadioGroup component is based on Ionic 4 ion-radio-group.

The RadioGroup is a container including a Radio Group Header and Radiobuttons. By default, the RadioGroup has 3 Radiobuttons. To insert more buttons, use the + button on the Radio group components or drag & drop a Radiobutton from the PALETTE to the Visual Editor canvas. Note that all Radiobuttons should have different value properties for correct work inside a RadioGroup.

You can add a header to your Radiogroup by setting the property Group Header to True.
To change the direction of radiobuttons, use the the Buttons direction property. The Horizontal direction is set by adding a CSS class of the flexbox styles.

🚧

A header can not be added when the Horizontal direction is used.

If you use the RadioGroup as a Form Control, the properties Name and [(ngModel)] should be defined. In this case, the Name property defines a key name of form data, and the [(ngModel)] property defines the name of the variable containing sent data.

For dynamic value changing, use [(ngModel)] instead of the Value property. In this case, a variable name containing changing value data as the value of the [(ngModel)] property should be passed.

Using RadioGroup as a Form Control

RadioGroup becomes the Form Control if it is included in a Form component and has the Name property specified. In this mode, the component has additional properties (Control ID and Control options that allow checking the validity, changing updating strategy, etc. These properties can be used only in the Form component doesn't have the Native validation property enabled.

For using variables as the control's data, the advanced property [(ngModel)] should be specified - the variable name should be entered as the property value.

The RadioGroup component has the following properties:

Property Name

Property Description

Value

The components's value.

Name

The name of the control, which is submitted with the form data.

Empty Selection

If set to True, radios can be deselected.

Buttons direction

Use the CSS flexbox layout to set buttons direction (Vertical or Horizontal) of radio buttons.

Group Header

If set to True, adds a header of the radio group. Hidden if the Horizontal direction is chosen.

Control ID

Name of the control. Used in components properties as the variable containing the control state.

Control Options

Advanced Form Control options.
Update On - controls when the value or the validity is updated.
Standalone - when set to true, the component will not register itself with its parent form but act as if it's not in the form.

[(ngModel)]

Angular directive for data binding.

(ionChange)

The event emitted when the value has changed.

For dynamic changing value use [(ngModel)] instead of the Value property.

The Radio Group Header has the following property:

Property Name

Property Description

Header text

The header text shown.

πŸ“˜

To read more about the Radiobutton component, check this section.

Range

The Range slider lets users select from a range of values by moving the slider knob. It can accept dual knobs, but by default one knob controls the value of the range

The component is based on Ionic 4 ion-range.

Using Range as a Form Control

🚧

Use the following description only when the Form component has the disabled Native validation property. If the Native validation property is enabled the control can be used as a default HTML Form Control.

To set the initial value of the control, use the Initial Value property of the Form Control properties section.

πŸ“˜

If included in a Form component, Range becomes a Form Control; the Name property should be specified (by default, the Name property is defined as the Component name property, so change it if necessary).

The component can have a number value (e.g. 20) or an object value if the Dual Knobs property is True (e.g. { lower: 20, upper: 80 }). If the property isn't specified the initial value will be set to null.

To use variables as the control's data, the advanced property [(ngModel)] should be specified - the variable name should be entered as the property value. It replaces the value that is set by the Initial Value property.

The component can get additional properties (Control ID and Control options) that allow checking the validity, changing updating strategy, etc. These properties can be used if the Native Validation property is disabled for the Form component.

Properties

The Range component has the following properties:

Property Name

Property Description

Component name

Gives informative name for the component in the Visual Editor (breadcrumbs, events, etc.).

Class

Defines equal styles for elements with the same class name.

Value

The value of the component.

Name

The name of the control, which is submitted with the form data.

Disabled

If set to True, the user cannot interact with the component.

Color

The color to use from your application's color palette.
Available colors: primary, secondary, tertiary, success, warning, danger, light, medium and dark.

Dual Knobs

Shows two knobs.

Max

Maximum integer value of the range.

Min

Minimum integer value of the range.

Step

Specifies the value granularity.

Pin

If set to True, a pin with integer value is shown when the knob is pressed.

Snaps

If set to True, the knob snaps to tick marks evenly spaced based on the step property value.

Ticks

If set to True, tick marks are displayed based on the step value. Only applies when Snaps is set to True.

Debounce

How long, in milliseconds, to wait to trigger the ionChange event after each change in the range value.

Mode

Determines which platform styles to use. Possible values are: iOS or MD.

Slot

Possible position inside another component.

Left (Right) Label

Properties of a label added on the left (right) side of the range:
Class - defines equal styles for elements with the same class name
Color - the color to use from your application's color palette
Mode - determines which platform styles to use. Possible values are: iOS or MD.
Text - the displayed label text.

Left (Right) Icon

Properties of an icon added on the left (right) side of the range:
Style - Ionic 4 name of the icon used.
Name - allows changing Ionic 4 icon style dynamically by property binding to the [name] element property. You can use string (Ionic 4 Icon name e.g. 'star') or a variable name.
Class - CSS classes for the icon.
Color - the color to use from your application's color palette.
Mode - determines which platform styles to use. Possible values are: iOS or MD.

[(ngModel)]

Angular directive for data binding. Contains a variable with the current value of the group.

(ionChange)

The event emitted when the value has changed.

When the Item Wrapped property is set to True, the component will be included in the Item with additional properties:

Property Name

Property Description

Item Wrapper

Color - item wrapper Ionic 4 color.
Disabled - if set to true, the user cannot interact with the component. The default is set to False.
Lines - defines how the bottom border should be displayed on the item. The available options are Full, Inset or None.
Mode - determines which platform styles to use. Possible values are iOS or MD.
Class - defines equal styles for elements with the same class name.
Slot - position inside another component: Fixed.

Reorder

Reorder properties:
Type - Content or Wrapper. If Wrapper is used, the item will be wrapped into a Reorder tag.
Icon - custom icon for Reorder with a type Content. Click the Default icon button to select the needed icon.
Slot - position inside the item: Start or End.
Custom SVG Icon* - used to select an .svg file. This path will be added as the src attribute. Click the Change button to select the uploaded image from Media Manager.

Search

Searchbars represent text fields that can be used to search through a collection. They can be displayed inside of a toolbar or the main content.

Search should be used instead of an Input to search lists. A clear button is displayed upon entering input in the searchbar's text field. Clicking on the clear button will erase the text field and the input will remain focused. A cancel button can be enabled which will clear the input and lose the focus upon clicking.

The Search component has the following properties:

Property Name

Property Description

Animated

If set to true, enables the search bar animation. The default is set tofalse.

Autocomplete

Indicates whether the value of the control can be automatically completed by the browser. The values are On and Off (default).

Autocorrect

Indicates whether auto correction should be enabled when the the text value is being entered/edited. The values are On and Off (default).

Cancel Button

Sets the behavior for the cancel button. Can be boolean (true or false) or string.
Icon - sets the cancel button icon. Only applies to the MD mode. The default is set to md-arrow-back.
Click the Default icon button to select the icon.
Show - if set to true, shows the cancel button
Text - sets the cancel button text. Only applies to iOS mode. The default is set to Cancel.

Clear Icon

Sets the clear icon. The default is to close-circle for iOS and close for MD.
Click the Default icon button to select the icon.

Debounce

Indicates how long, in milliseconds, to wait to trigger the ionInput event after each keystroke. The default is set to 250.

Is Focus

If set to true, shows the searchbar when it has focus. Works in the Visual Editor only.

Placeholder

Instructional text that shows before the input has a value. The default is set to Search.

Search Icon

The icon to be used as the search icon. The default is to search.
Click the Default icon button to select the icon.

Spellcheck

If set to true, enables spellcheck on the input. The default is set to false.

Type

Sets the input type. The values are Text, Password, Email, Number, Search (default), Tel, Url.

Value

The searchbar value.

(ionChange)

Emitted when the value has changed.

(ionClear)

Emitted when the clear input button is clicked.

(ionFocus)

Emitted when the input has focus.

(ionInput)

Emitted when the keyboard input ocurrs.

Visit the Ionic documentation to read more about Searchbar.

Select

Selects are (Form Controls) used to select an option or options from a set of options, similar to a native ion-select element. When the select is tapped, a dialog appears with all of the options in a large, easy to select list.
A select should be used with child ion-select-option elements. If the child option is not given a value attribute, then its text will be used as the value.
If the value is set on the ion-select, the selected option will be chosen based on that value. Otherwise, the selected attribute can be used on the ion-select-option.

πŸ“˜

Basics about working with the Select component

You can find more information on how to work with Select here.

Mapping

There is a possibility to use mapping to the Selected property of its options.
Such binding is used only for initializing selected options when they are created dynamically.
If it is necessary to use dynamic selection for options, the value of the selected option should be bound to the Value property of the Select component in the mapping.

<ion-select value="value2">
  <ion-select-option value="value1">value1</ion-select-option>
  <ion-select-option value="value2">value2</ion-select-option>
  <ion-select-option value="value3">value3</ion-select-option>
</ion-select>

In this case, to select the value2 option by mapping, the binding to the Value property of the Select component should return a string value2 which is equal to the Value property of the option.

If the Multiple property is enabled, the mapping should return an array of values of options which should be selected (['value2', 'value3'])

Using Select as a Form Control

The component is the Form Control of Angular form when:

  • it is included into the Form component
  • the Form has the Native validation property disabled (is set to False)
  • it doesn't have the Standalone option under Control Options enabled
  • the component has the property Name specified

If the Native validation property is enabled, the control can be used as a default HTML Form Control.
By default, the Name property is set as the Component name property and can be customized.
To set the initial value of the control, use the Initial Value property of the Form Control properties section.
The component can have only string values or null. If the property isn't specified, the initial value will be set to null.

For using variables as the control's data the advanced property [(ngModel)] should be specified - the variable name should be entered as the property value. It replaces the value that is set by the Initial Value property.
The component gets additional properties (Control ID and Control options) that allow checking the validity, changing the updating strategy, etc. These properties can be used only if the Form component doesn't have Native Validation enabled.

Read more about validation in the Form section.

The Select Item Wrapper (ion-item) component has the following properties:

Property Name

Property Description

Item Wrapped

If set to True, the component will be included in the Item with additional properties

Color

The color to use from your application's color palette. (primary, secondary, tertiary, success, warning, danger, light, medium and dark). Defaults are set to primary.

Lines

How the bottom border should be displayed on the item. The available options are Full, Inset or None.

Label

If label is used, the input will be wrapped in the<ion-item> tag.
Text - label text.
Position - the position determines where and how the label behaves inside an item. Possible values are Inline, Fixed, Stacked or Floating.
Color - label Ionic 4 color.

Reorder

Reorder properties:
Type - Content or Wrapper. If 'Wrapper is used, the item will be wrapped into a reorder tag.
Icon - custom Icon for reorder with a type Content
Slot - position inside the item
Custom SVG Icon - an svg file can be selected. This path will be added as the src attribute.

When used as a Form Control, Select has the following properties:

Property Name

Property Description

Initial Value

Default form control value.

Control ID

Name of the control. Used in components properties as a variable containing the control state.

Control Options

Advanced form control options.
Update On - controls when the value or validity is updated.
Standalone - if set to True, the component will not register itself with its parent form, and acts as if it's not in the form.

Visit the Ionic 4 documentation to read more about <ion-item>.

Select

Click the + button on the Select Item Wrapper to add a new Select:

Adding Select

Visit the Ionic 4 documentation to read more about <ion-select>.

Property Name

Property Description

Placeholder

The text to display when the select is empty.

Name

The name of the control, which is submitted with the form data.

Selected Text

The text to display instead of the selected option's value.

Cancel Text

The text to display on the Cancel button. The default is set to Cancel.

OK Text

The text to display on the OK button. The default is set to OK.

Multiple

If set to True, the select can accept multiple values.

Interface

The interface the select should use: Action Sheet, Popover or Alert (default).

Interface Options

Any additional options that the interface can take.

Opened

If set to true, opens the Select. This property is available only for development mode.

[(ngModel)]

Angular directive for data binding.

(ionChange)

The event emitted when the value has changed.

πŸ“˜

The property Opened is used only in the Visual Editor for switching between the opened and closed states of the Select component.

Select Option

Click the + button on the Select to add a new Select Option:

Adding Select Option

Use double-clicking on the select to show options:

The Select Option (ion-select-option) component has the following properties:

Property Name

Property Description

Value

The input value.

Text

The option text.

Selected

If set to true, the element is selected.

Disabled

If set to true, the user cannot interact with the select. Defaults are set to false.

Visit the Ionic 4 documentation to read more about <ion-select-option>.

Spinner

The Spinner component provides a variety of animated SVG spinners. Spinners are visual indicators that the app is loading content or performing another process that the user needs to wait on.

The default spinner to use is based on the platform. The default spinner for iOS is lines, and the default for Android is circular. If the platform is neither iOS nor Android, the spinner will be set default to circular. If the Name property is set, the spinner will be used instead of the platform-specific spinner.

The Spinner component has the following properties:

Property Name

Property Description

Duration

Duration of the spinner animation in milliseconds. The default varies based on the spinner.

Paused

If set to true, the spinner's animation will be paused. Defaults are set to false.

Spinner Name

The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. Possible values are: lines, lines-small, dots, bubbles, circles, crescent, circular.

Visit the Ionic 4 documentation to read more about Ionic 4 Spinner.

Text

The Text component is a simple component that can be used to style the text color of any element. The ion-text element should wrap the element in order to change the text color of that element.

The Text component has the following properties:

Property Name

Property Description

Container

You can use Ionic 4 container to create Ionic 4 text component: ion-text, ion-note, ion-badge, ion-label, ion-card-title, ion-card-subtitle, span, p, div, a, h1-h6. If these containers are used, text styles will be changed to Ionic 4. Here, HTML tags are selected as text containers.

Text

A component property where the content is to be entered. This field can’t be empty. HTML tags are not supported. Multiline text is supported (lines will be separated with br tag).

Any HTML element can be used as the value of the Container property.

For the ion-label container, an advanced property Position with values Fixed, Stacked or Floating can be added.
The property Slot can be used as an advanced property.

πŸ“˜

The properties Color and Mode work only when Ionic 4 wrapper (e.g. ion-label) is used.

For the ion-label container an advanced property Position with values fixed, stacked or floating can be added.

🚧

The component can include only one Text component as a child. Use the HTML component if you need complex structure.

Visit the Ionic documentation to read more about Text.

Toggle

The Toggle component changes the state of a single option. They can be switched on or off by pressing or swiping. They can also be checked programmatically by setting the Checked property.

Using Toggle as a Form Control

The component is the Form Control of Angular form when:

  • it is included into the Form component
  • the Form has the Native validation property disabled (is set to False)
  • it doesn't have the Standalone option under Control Options enabled
  • the component has the property Name specified

🚧

Use the following description only when the Form component has the disabled Native validation property. If the Native validation property is enabled the control can be used as a default HTML Form Control.

To set the initial value of the control use the Initial Value property of the Form Control properties section. The component can have only boolean (true or false) values or null. If the property isn't specified the initial value will be null.
To use variables as the control's data, the advanced property [(ngModel)] should be specified - the variable name should be entered as the value of the property. It replaces the value that is set by the Initial Value property.

The component gets additional properties (Control ID and Control options) that allow checking the validity, change updating strategy, etc. These properties can be used only if the Form component doesn't have Native Validation enabled.

For using variables as the control's data the advanced property [(ngModel)] should be specified - the variable name should be entered as the value of the property.

Properties

The Toggle component has the following properties:

Property Name

Property Description

Value

The value of the toggle does not mean if it is checked or not, use the checked property for that. The value of a toggle is analogous to the value of a <input type=checkbox>, it is only used when the toggle participates in a native form. The default is set to on.

Checked

If set to true, the checkbox is selected. The default is set to false.

Disabled

If set to True, the user cannot interact with the component.

[(ngModel)]

Angular directive for data binding.

(ionChange)

The event emitted when the value has changed.

When the Item Wrapped property is set to True, the component will be included in the Item with additional properties:

Property Name

Property Description

Item Wrapper

If the item wrapper features are used, the toggle will be wrapped in the ion-item tag.
Color - item wrapper Ionic 4 color.
Lines - how the bottom border should be displayed on the item. Available options are Full, Inset or None.
Mode - determines which platform styles to use. Possible values are iOS or MD.

Label

If label is used, the input will be wrapped in the <ion-item> tag.
Text - the displayed label text.
Position - determines where and how the label behaves inside an item. The possible values are Fixed, Stacked or Floating.
Color - label Ionic color. Available colors: primary, secondary, tertiary, success, warning, danger, light, medium and dark.
Mode - determines which platform styles to use. Possible values are iOS or MD.
Slot- label position in the ion-item tag (Start or End).

Reorder

Reorder properties:
Type - if set to Wrapper, the item will be wrapped into a reorder tag.
Icon - custom icon for reorder with a type Content.
Click the Default icon button to select the needed icon.3xust
Custom SVG Icon - used to select an svg file. This path will be added as the src attribute. Click the Change button to select the uploaded image from Media Manager.

Visit the Ionic 4 documentation to read more about Ionic 4 Toggle.

Toolbar

The Toolbar component contains a Toolbar Title and a Toolbar Buttons components.

πŸ“˜

By default, any new page is created with its Header and Footer that, in their turn, contain the following child components: Toolbar, Toolbar Title, and Toolbar Buttons.
Check this section below to learn more about the Header and Footer components.

Toolbars are positioned above or below content. When a toolbar is placed in an <ion-header> it will appear fixed at the top of the content, and when it is in an <ion-footer> it will appear fixed at the bottom. The fullscreen content will scroll behind a toolbar in a header or footer. When placed within an <ion-content>, toolbars will scroll with the content.

Visit the Ionic 4 documentation to read more about Ionic 4 Toolbar.

Toolbar Title

The Toolbar Title component has the following property:

Property Name

Property Description

Color

The color to use from your application's color palette.

Text

Toolbar title text

Toolbar Buttons

To add a new Toolbar Buttons section. click the + button inside the Toolbar.
The Toolbar Buttons component is a container element. The buttons placed in a toolbar should be placed inside of the <ion-buttons> element.

The <ion-buttons> element can be positioned inside of the toolbar using a named slot.
The Toolbar Buttons component has the following properties:

Property Name

Property Description

Slot

The position inside the toolbar (Start (default), End, Primary or Secondary).

Visit the Ionic 4 documentation to read more about Ionic 4 Toolbar Buttons.

Use the property Menu Button to add or remove a menu button (added by dragging & dropping the Button component to the Toolbar Button) into the Toolbar.
Menu Button is a component that automatically creates the icon and functionality to open a menu on a page.

Menu Button

The Menu Button component has the following properties:

Property Name

Property Description

Auto Hide

Automatically hides the menu button when the corresponding menu is not active.

Menu

Optional property that maps to a menu's menuId property. Can also be start or end for the menu side. This is used to find the correct menu to toggle.

(click)

The event emitted when the button is clicked.

Visit the Ionic 4 documentation to read more about Ionic 4 Menu Button.

You might also like this Appery.io Community video showing how to use some Ionic components in a mobile application created with Appery.io:

Updated 19 days ago

Ionic 4 UI Components


Ionic 4 UI components available in the Visual App Builder

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.