The NativeScript Modal Dialog Checklist
Close your eyes for a moment and imagine yourself creating a modal dialog for a web application. Ok, I know, there are more exciting things…
Take control of your career. Build JavaScript mobile apps.
Catch Dave Coffin, Nathan Walker, and Alex Ziskind at ngAtlanta in February 2020 for an advanced NativeScript with Angular workshop called Breathe life into mobile UX with solid architecture lessons. You can register now and take your NativeScript skills up a notch. Register here.
Close your eyes for a moment and imagine yourself creating a modal dialog for a web application. Ok, I know, there are more exciting things to imagine, but roll with it for a moment.
Got it?
Now imagine creating a modal dialog in a NativeScript with Angular app. How far did you get?
The thing is, right now, it’s a pretty involved process. There are a few steps you need to follow to set up a modal dialog in a native app created with NativeScript. Maybe one day it will be easier, but for now I’ve created a checklist that you can follow. Instead of digging through documentation every time you want to make a modal, you can just pull out this handy dandy checklist and implement each step.
The Checklist
Modal Component Section
- Create modal component with ModalDialogParams injected
-
Add a close handler in the modal component
ngModule Section
- Register ModalDialogService with the ngModule’s providers
- Add modal component to the ngModule declarations array
-
Add modal component to the ngModule entryComponents array
Parent Component Section
- Inject ModalDialogService and ViewContainerRef
- Create an instance of ModalDialogOptions
-
Call ModalDialogService.showModal() and handle promise
This checklist is part of the NativeScript with Angular Pro course that’s right here on NativeScripting. In chapter 6, of the course, I guide you through this entire checklist as we build out a modal dialog, and then I show you how to encapsulate modal functionality in scalable, reusable and strongly typed data structures and service. This way you and your team can get help from your IDE, since you’re using TypeScript, to implement a modal dialog.
Here is a preview lesson from that chapter.
And hey, feel free to refer to the checklist anyway if you wish.
