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…

The NativeScript Modal Dialog Checklist poster

Take control of your career. Build JavaScript mobile apps.

ng atlanta

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.


Alex lives in Washington, DC. He's a speaker, trainer, and a Telerik Developer Expert. He's been invloved in NativeScript projects since 2015 and has created courses for Pluralsight and LinkedIn.

Did you enjoy this? Share it!

Take control of your career. Build JavaScript mobile apps.