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    

Solutions

Ionic 4 solutions and how-tos.

Small apps that show Ionic 4 features and other how-tos.

Passing Data to/from Modal Screen

In this example, you will learn how to pass properties from Screen1 to a modal screen and back.

  1. Suppose, we have two properties, for example, Title and Description added as Inputs on Screen1 and a modal screen named modal1.
  2. On Screen1, create a Button, name it Open modal:
  1. Then, unfold the Screen1 EVENTS panel below, select the button and, for its Click event,
    select the Run TypeScript action and run the following TypeScript by using the Show modal snippet (select from the Insert snippet dropdown):

Make sure that necessary adjustments have been made to the code:

this.Apperyio.showModal("modal1", { // "modal1" is modal screen name
        componentProps: {title: "Some title", description: "Some cool description"}, // here is data that we want to send
        showBackdrop: true,
        backdropDismiss: true,
        cssClass: "",
        animated: true,
        keyboardClose: true
    })
    .then(modal => {
        modal.present();
        modal.onDidDismiss().then((dataReturned) => {
            console.log(dataReturned.data); // here we can process data received from modal screen
        });
    });
  1. Now, go to modal1 screen and add a Text and two Button components to it:
  1. Now, switch to the modal1 CODE tab and add two variables with the names title and description; both of String type:

🚧

Make sure that the variables' names correspond with the object properties' names defined in step 3: {title: "Some title", description: "Some cool description"}. This is why we create variables with the names title and description of String type in this step.

  1. To use them on modal1 inside the code, this.title and this.description can be used.
    But we advise using the mapping feature. For example, in this case, the following mapping can be used for the Before page showing event of the Page component where the variables are mapped to their corresponding components on the screen:
  1. To close modal and send data from modal1 back to Screen1, select the OK button and, by using the Close modal snippet (select from the Insert snippet dropdown), run the following TypeScript event by the button click with passing the data we need to send (in this case, {action: "ok"}):
  1. To close modal with passing different data, for example,cancel, select the Cancel button and, by using the same Close modal snippet, run the following TypeScript event by the button click but sending different data to the modal ({action: "cancel"}):

Now, test the app opening the modal screen:

Basics about Working with Select Component

Populating Select options with data using variables

  1. To populate options with Select, you need to have an array with items inside.
  2. Add a new variable to the page. Name it to optionsList and set its type as Any:
  1. Go to the page DESIGN tab and add (or activate) the Select option component. Then define its attributes under the PROPERTIES tab as follows:
  • *ngFor = let optionItem of optionsList. This attribute will multiply the Select Option component with every item in the array in the variable optionsList.
  • Value = {{optionItem.id}}. This attribute sets a value for certain select option and will be used to get or set the selected option.
  • Text = {{optionItem.text}}. This attribute sets a select option text.
  1. Now, you can fill the optionsList variable with an array in the code. Executing this code will populate the Select component:
this.optionsList = [
    {"text": "Red", "id": "1"},
    {"text": "Green", "id": "2"},
    {"text": "Blue", "id": "3"}
];

Getting and settings selected option(s) into the variable

  1. Add another variable, selectValue, to the page and set its type to Any:
  1. On the page DESIGN tab, activate (by clicking on it) the Select component and set its [(ngModel)] attribute to selectValue:
  1. Now, you can use the following code to check the selected option in the Select component:
//where "2" is a value of option which you want to be selected.
this.selectValue = "2";
  1. To get the selected option, use the below code:
//Here this.selectValue variable will contain a String.
alert(this.selectValue);

Multiple select

  1. To make the Select component to multiple checked options, set its Multiple attribute to True:
  1. Now, you can use the following code to check multiple selected options in the Select component:
//where "2", and "3" are values of options that need to be selected.
this.selectValue = ["2", "3"];
  1. To get multiple selected options, use the following code:
//Note in multiple mode, this.selectValue variable will contain an array with selected items.
alert(JSON.stringify(this.selectValue));

Internationalisation in Ionic 4 Apps

Check this document to learn how to use ngx-translate third-party internationalization (i18n) library to build a multilingual Ionic 4 app.

Videos

You can check our Youtube Community Channel featuring the newest and/or most requested Appery.io platform options.

Updated 8 days ago

Solutions


Ionic 4 solutions and how-tos.

Suggested Edits are limited on API Reference Pages

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