Titanium Angular comes with a set of helpers that provide a modernized access to commonly used features of our Titanium SDK. All of these employ a Promise-based API and try to abstract away repetitive steps from the original Titanium APIs. However, they are purely a convenience feature and won't replace any existing Titanium APIs.
User Interface
Dialogs
To ease the creation of dialogs, Titanium Angular comes with several predefined dialogs.
AlertDialog
The AlertDialog helper allows you to display a simple alert with a single button. Besides
the dialog's title and message you can also specify an optional okButtonText.
AlertDialog
|
1
2
3
4
5
6
7
|
import { AlertDialog } from 'titanium-angular';const alertDialog = new AlertDialog({ title: 'Alert', message: 'This is awesome!'});alertDialog.show().then(() => console.log(`Alert closed`)); |
ConfirmDialog
A confirm dialog will display a dialog using the title and message properties. You can also change the button text through the okButtonText and cancelButtonText options.
ConfirmDialog
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import { ConfirmDialog, ConfirmResult } from 'titanium-angular';const confirmDialog = new ConfirmDialog({ title: 'Confirm', message: 'Do you want to continue?'});confirmDialog.show().then((result: ConfirmResult) => { if (result === ConfirmResult.Ok) { console.log('Confirmed!'); } else if (result === ConfirmResult.Cancel) { console.log('Canceled!'); }}); |
Prompt Dialog
To prompt a user for some text input you can use the prompt dialog.
Custom Dialogs
Besides those predefined dialogs you can also completely customize your
dialogs using the BaseDialog class. A base dialog accepts the title and message options. You can then add multiple DialogAction to your dialog which represent a button of the dialog with a title and an optional handler function to call if that button is pressed.
BaseDialog
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
import { BaseDialog, DialogAction } from 'titanium-angular';const dialog = new BaseDialog('Dialog title', 'Some message');// Add a simple buttondialog.addAction(new DialogAction('Ok', () => console.log('Ok button pressed!')));// Add a button representing the cancel action.const cancelAction = new DialogAction('Cancel', () => console.log('Are you really gonna quit now?'));cancelAction.cancel = true;dialog.addAction(cancelAction);// Add a button with the destructive optionconst destructiveAction = new DialogAction('Abort', () => console.log('Ok ok, we are done here.'));destructiveAction.destructive = true;dialog.addAction(destructiveAction); |
By default both the cancel and destructive properties are set to false.
Picker (Android only)
Handle the common use case of date and time pickers presented as modals with the following helper classes.
Time Picker
A simple time picker can be created with a minDate, maxValue, and value options. All of those options are optional and will accept a Date object. Passing an empty options object results in no restrictions on
the selectable time frame and the current time will be pre-selected.
TimePicker
|
1
2
3
4
5
6
|
const timePicker = new TimePicker({});timePicker.show().then(selectedTime => { console.log(`Selected time: ${selectedTime}`);}).catch(() => { console.log('Time selection canceled');}); |
Date Picker
Selecting both the date and a time can be achieved with the date picker.
It accepts the minDate, maxValue and value options. All of those options are optional and will accept a Date object. Passing an empty options object results in no restrictions
on the selectable dates and the current date and time will be pre-selected.
DatePicker
|
1
2
3
4
5
6
|
const datePicker = new DatePicker({});datePicker.show().then(selectedDate => { console.log(`Selected date: ${selectedDate}`);}).catch(() => { console.log('Date selection canceled');}); |
Device
Device environment
Allows to check on which platform the app is currently running.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
@Component({templateUrl: "./some.component.html"})class SomeComponent implements OnInit { constructor(private device: DeviceEnvironment) { } onInit() { if (this.device.runs('android')) { // ... } }} |
Valid platform names are android, ios, and windows.