Alert, confirm & prompt
Use the alert, confirm and prompt messages to pop a message box in the middle of the screen. Alert the user or collect feedback at the same time. These controls cannot be dismissed by pressing the overlay, which avoids closing it by mistake.
Demo
Alert
Alerts have a title, message and a confirmation button.
constructor(public notify: Notifications) { }
this.notify.alert({
title: 'Cellular Data is Turned Off for "Safari"',
message: 'You can turn on cellular data for this app in Settings.'
});Confirm
Besides a title and message, the confrim dialog supports a customizable okText and cancelText.
constructor(public notify: Notifications) { }
this.notify.confirm({
title: 'Use location service?',
message: 'Help apps determine the location. This means sending anonymous location data, even when no apps are running.',
okText: 'Agree',
cancelText: 'Disagree'
});Prompt
Adding to the title and message, the prompt provides a focused way of capturing user input. With the inputType, passwords can be entered and the placeholder provides a helper text.
constructor(public notify: Notifications) { }
this.notify.prompt({
title: 'Sign in to iTunes Store',
message: 'Enter the Apple ID password for "hello@mobiscroll.com".',
placeholder: 'Password',
inputType: 'password'
});ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, Notifications, setOptions } from '@mobiscroll/angular';
setOptions({
theme: ' ',
themeVariant: ' ',
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
constructor(public notify: Notifications) {}
showAlert(): void {
this.notify.alert({
title: 'Cellular Data is Turned Off for "Safari"',
message: 'You can turn on cellular data for this app in Settings.',
});
}
showConfirm(): void {
this.notify.confirm({
title: 'Use location service?',
message: 'Help apps determinde location. This means sending anonymous location data, even when no apps are running.',
okText: 'Agree',
cancelText: 'Disagree',
});
}
showPrompt(): void {
this.notify.prompt({
title: 'Sign in to iTunes Store',
message: 'Enter the Apple ID password for "hello@mobiscroll.com".',
placeholder: 'Password',
inputType: 'password',
});
}
}
<mbsc-page>
<mbsc-button (click)="showAlert()">Alert</mbsc-button>
<mbsc-button (click)="showConfirm()">Confirm</mbsc-button>
<mbsc-button (click)="showPrompt()">Prompt</mbsc-button>
</mbsc-page>