🔒 Learn how to create more secure apps at the "Best Practices for Securing Your Mobile Apps" webinar. Register today!

NativeScript Angular

Dialogs

NativeScript lets you create dialogs in your app in a manner similar to the web browser. You can create alerts, confirmations, prompts, logins and dialogs that require action.

Action Dialog

An Action Dialog will require a particular activity from the user. A basic definition of such dialog that expects a selection is:

let options = {
    title: "Race selection",
    message: "Choose your race",
    cancelButtonText: "Cancel",
    actions: ["Human", "Elf", "Dwarf", "Orc", "Unicorn"]
};

action(options).then((result) => {
    console.log(result);
});

Image

Improve this document

Demo Source


Alert Dialog

An Alert Dialog will notify the user for an action that has happened. It can be defined as:

let options = {
    title: "Race selection",
    message: "Race chosen: Unicorn",
    okButtonText: "OK"
};

alert(options).then(() => {
    console.log("Race chosen!");
});

Image

Improve this document

Demo Source


Confirm Dialog

A Confirm Dialog will expect the user to accept or reject the action that is about the happen. For example:

let options = {
    title: "Race selection",
    message: "Are you sure you want to be a Unicorn?",
    okButtonText: "Yes",
    cancelButtonText: "No",
    neutralButtonText: "Cancel"
};

confirm(options).then((result: boolean) => {
    console.log(result);
});

Image

Improve this document

Demo Source


Login Dialog

A Login Dialog will wait for the user to input their credentials:

let options: LoginOptions = {
    title: "Login Form",
    message: "Enter your credentials",
    okButtonText: "Login",
    cancelButtonText: "Cancel",
    neutralButtonText: "Neutral",
    userNameHint: "Enter your username",
    passwordHint: "Enter your password",
    userName: "john_doe",
    password: "123456"
};

login(options).then((loginResult: LoginResult) => {
    console.log(loginResult.result);
});

Image

Improve this document

Demo Source


Prompt Dialog

A Prompt Dialog will request for an input. A basic definition might be:

let options: PromptOptions = {
    title: "Hey There",
    defaultText: " Enter your mood ",
    message: "How you doin'",
    inputType: inputType.text,
    okButtonText: "OK",
    cancelButtonText: "Cancel",
    neutralButtonText: "Neutral",
    cancelable: true
};

prompt(options).then((result: PromptResult) => {
    console.log("Hello, " + result.text);
});

Image

Improve this document

Demo Source