Modal View Ng
Modal Dialog
Modal View Actionbar
The following example is demonstrating how to create a modal page with ActionBar
. The main-view.component is the page from which, you will open the root modal (modal-root.component). The root modal contains a page-router-outlet
and has a default navigation to modal-view.component while using the children routing configuration.
main-view.component.html and main-view.component.ts
Routing configuration file (modal-view-examples.module.ts) which sets the children routes (in this example the modal-view
path).
{
path: "modal-view-actionbar",
component: MainViewComponent,
data: { title: "Main page" },
children: [
{
path: "modal-view", component: ModalViewActionBarComponent
}
]
}
modal-root.component.html and modal-root.component.ts contains page-router-outlet
with default navigation via modal-view
path.
modal-view.component.html and modal-view.component.ts (the default modal-view
path). The modal contains ActionBar
.
Modal View Navigation
The following example demonstrates how to enable navigaiton within a modal page. First we have a component which opens the main root modal. The root modal contains a page-router-outlet
which has a default navigaiton via the modal
route (loads the home-modal-view-content.component). The router outlet has its own routing table (modal-view-examples.module.ts) and can navigate to the second-modal
route within the root modal.
Providing the ModalDialogService
in @NgModule
config.
app.module.ts
// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { routes } from "./app.routes";
import { AppComponent } from "./app.component";
import { ModalDialogService } from "nativescript-angular/modal-dialog";
@NgModule({
schemas: [NO_ERRORS_SCHEMA],
declarations: [
AppComponent,
],
bootstrap: [AppComponent],
imports: [
NativeScriptModule,
NativeScriptFormsModule,
NativeScriptRouterModule,
NativeScriptRouterModule.forRoot(routes),
],
providers: [
ModalDialogService,
]
})
export class AppModule { }
The component (modal-view-navigation.component) which opens the root modal view (home-modal-view.component).
modal-view-navigation.component.html and _modal-view-navigation.component.ts
Routing configuration file (modal-view-examples.module.ts) which sets the children routes (in this example the modal
and second-modal
path).
{
path: "modal-view-navigation",
component: ModalViewNavigationComponent,
data: { title: "Modal view navigation" },
children: [
{
path: "modal", component: HomeModalViewContentComponent
},
{
path: "second-modal", component: SecondModalViewContentComponent
}
]
},
The root modal component contains the page-router-outlet
and has a default navigation to the first inner modal view.
home-modal-view.component.html and home-modal-view.component.ts
Defining the first inner modal view (the modal
route).
home-modal-view-content.component.html and home-modal-view-content.component.ts
Note: We can navigate to the second component inside the Modal view while defining its relative path(e.g.
"../second-modal"
). To navigate relatively, we should use ActiveRouter module as it is demonstrated in the example above.
Defining the first inner modal view (the second-modal
route).
second-modal-view-content.component.html and second-modal-view-content.component.ts
Sample Modal View Module Example
Modal Dialog
app.module.ts
// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { routes } from "./app.routes";
import { AppComponent } from "./app.component";
import { ModalDialogService } from "nativescript-angular/modal-dialog";
@NgModule({
schemas: [NO_ERRORS_SCHEMA],
declarations: [
AppComponent,
],
bootstrap: [AppComponent],
imports: [
NativeScriptModule,
NativeScriptFormsModule,
NativeScriptRouterModule,
NativeScriptRouterModule.forRoot(routes),
],
providers: [
ModalDialogService,
]
})
export class AppModule { }
The host component (sample-modal-view-module.example.html) from which we will open the different modal pages (e.g., modal-view.html).
sample-modal-view-module.example.html
<ScrollView sdkExampleTitle sdkToggleNavButton >
<StackLayout>
<Label text='Count the days between the dates' class="m-15 h2" textWrap="true"></Label>
<Label [text]='startDate | date:"MM/dd/yy"' class="m-15" textWrap="true"></Label>
<Button class="btn btn-primary btn-active" text="Enter Start Date" (tap)="getStartDate()"></Button>
<Label [text]='endDate | date:"MM/dd/yy"' class="m-15" textWrap="true"></Label>
<Button class="btn btn-primary btn-active" text="Enter End Date" (tap)="getEndDate()"></Button>
<Label [text]='"Days: " + days' class="m-15" textWrap="true"></Label>
<Button class="btn btn-primary btn-active" text="Count Days" (tap)="countDays()"></Button>
<Label text='Use different date formats' class="m-15 h2" textWrap="true"></Label>
<Label [text]='"Date: " + (selectedDate | date: "MM/dd/yy")' class="m-15" textWrap="true"></Label>
<Label [text]='"Weekday: " + (selectedDate | date: "EEEE")' class="m-15" textWrap="true"></Label>
<Button class="btn btn-primary btn-active" text="Enter Date" (tap)="getDate()"></Button>
</StackLayout>
</ScrollView>
Passing parameters from the opened modal view.
modal-view.html and modal-view.ts
Receiving the result from the modal page.
getDate() {
this.createModelView().then(result => {
if (this.validate(result)) {
this.selectedDate = result;
}
}).catch(error => this.handleError(error));
}
private createModelView(): Promise<any> {
const today = new Date();
const options: ModalDialogOptions = {
viewContainerRef: this.vcRef,
context: today.toDateString(),
fullscreen: false,
};
// showModal returns a promise with the received parameters from the modal page
return this.modalService.showModal(ModalViewComponent, options);
}