text: How to Build a Simple Dialog for Your NativeScript Apps
  How to Build a Simple Dialog for Your NativeScript Apps
  Learn how to use TypeScript code to make the logic work quickly, and some great CSS for animations and overall styling. Read on to get started!
  Join the DZone community and get the full member experience.Join For Free
  There are a few different ways to implement dialogs in NativeScript apps. The NativeScript dialog module lets you show a variety of dialogs using built-in APIs, and is great for simple use cases.
  A sample of the NativeScript dialog module. Try this example in NativeScript Playground
  On the other end of the spectrum, you can also create dialogs that are completely modal pages, complete with native transitions. These are great when you want to have full control over how the dialogs look and work.
  A sample of modal pages in NativeScript. Try this example in NativeScript Playground
  In my experience, though, sometimes you want a simple dialog that you can style without going through the hassle of creating an entire page. Basically, you want something that looks like this:
  In this article, I'm going to walk you through how to create a simple dialog like the one above. I'll be using Angular for my explanations, but the techniques are roughly the same whether you're using Angular, Vue.js, or NativeScript Core.
  Building the Markup
  Here is what the markup to make this dialog looks like at a high level.
  <GridLayout class="page"> <GridLayout class="content"> <StackLayout> <!-- Page content goes here --> </StackLayout> </GridLayout> <AbsoluteLayout class="dialog-wrapper"> <StackLayout class="dialog"> <!-- Dialog content goes here --> </StackLayout> </AbsoluteLayout> </GridLayout>
  To start, you have an outer
  <GridLayout> that contains your entire page. If you're using Angular, this needs to be the root element of your page component, and if you're not using Angular, this needs be the only child of the root
  <Page> element.
  Your page has two children, a
  <GridLayout> that will contain the content of your app, and an
  <AbsoluteLayout> that will serve as a container for your dialog. The idea here is that you'll write your content exactly as you normally would, and show and hide the dialog, as necessary, in your app. In order to do that, let's write a little bit of TypeScript and CSS.
  Showing and Hiding the Dialog
  In your code, you need to create a property that tracks whether the dialog is open or not, as well as a few methods for manipulating the dialog's state. If you're using Angular, that code will look something like this.
  import { Component } from "@angular/core"; @Component({ selector: "Home", moduleId: module.id, templateUrl: "./home.component.html", styleUrls: ['./home.component.css'] }) export class HomeComponent { dialogOpen = false; showDialog() { this.dialogOpen = true; } closeDialog() { this.dialogOpen = false; } }
  The
  dialogOpen property, as its name implies, tracks whether the dialog is currently open or not. You set it to a default value of
  false, as you usually don't want the dialog to show when your page loads.
  Now that you have the property in place, your next step is to use that property in your markup. One way to do so is with the following markup.
  <GridLayout class="page" [class.dialogOpen]="dialogOpen"> <GridLayout class="content"> <StackLayout> <Button class="btn btn-primary" text="Show Dialog" (tap)="showDialog()"></Button> </StackLayout> </GridLayout> <AbsoluteLayout class="dialog-wrapper"> <StackLayout class="dialog"> <Label textWrap="true" text="Are you sure you want to continue?"></Label> <Button class="btn btn-primary" text="Yes"></Button> <Button class="btn" text="No" (tap)="closeDialog()"></Button> </StackLayout> </AbsoluteLayout> </GridLayout>
  There are a few changes in this markup to use your new property. First, you add two
  tap event handlers, one is on a button in your main content to show the dialog, and another is on the dialog's cancel button to close the dialog.
  Second, you use Angular's
  [] syntax to conditionally apply a
  dialogOpen CSS class name to your main page element. This class name will serve as the hook you need to make your dialog behave like a dialog. To see how it all works, let's look at the CSS you'll need to make all this come together.
  Adding Styling
  Believe it or not, you already have all the markup and code you need to make this example work, as the real magic of this example happens in CSS. Here's the minimum CSS code you'll need.
  .dialogOpen .content { opacity: 0.2; } .dialogOpen .dialog-wrapper { visibility: visible; } .dialog-wrapper { visibility: collapse; } .dialog { border-width: 1 0 1 0; border-color: black; width: 100%; margin-top: 100; }
  By default, the dialog wrapper element is set to a
  visibility of
  collapse, which hides the dialog from the user.
  But when the
  dialogOpen class gets applied, the
  .dialogOpen .dialog-wrapper selector now applies, and the dialog wrapper's
  visibility is set to
  visible, which shows the dialog to the user. Additionally, the
  .dialogOpen .content selector now applies and changes the
  opacity of the main content to
  0.2, which gives it a bit of a dim appearance to help focus the dialog content.
  When you put this all together, you should now have a dialog that looks a little something like this.
  Further Improvements
  There are a few different ways you can improve on this simple design. First, you can toss in a little animation to give the dialog a nice fade-in effect. That code looks a little something like this:
  @keyframes show { from { opacity: 0; } to { opacity: 1; } } .dialogOpen .content { opacity: 0.2; } .dialogOpen .dialog-wrapper { visibility: visible; animation-name: show; animation-duration: 0.3s; animation-fill-mode: forwards; } .dialog-wrapper { visibility: collapse; opacity: 0; } .dialog { border-width: 1 0 1 0; border-color: black; width: 100%; margin-top: 100; }
  Now, when you set the
  dialogOpen class name, the
  show CSS animation will change the opacity of the dialog wrapper from
  0 to
  1 over 0.3 seconds. The result is a nice little fade-in effect that looks like this.
  At this point, you'll probably want to write some CSS to clean up the spacing in this UI based on what you want to show in the dialog. You can refer to the full code samples listed at the end of this article to find one example of how you might want to do that.
  Before I leave you, though, there's one last tip I need to mention. To discuss, let's return to this sample's basic markup.
  <GridLayout class="page"> <GridLayout class="content"> <StackLayout> <!-- Page content goes here --> </StackLayout> </GridLayout> <AbsoluteLayout class="dialog-wrapper"> <StackLayout class="dialog"> <!-- Dialog content goes here --> </StackLayout> </AbsoluteLayout> </GridLayout>
  Focus on the dialog wrapper. Because the dialog wrapper is a child of the parent page, it inherits the page's dimensions — i.e., the wrapper takes up the same dimensions as the page. This is by design, as it means when the dialog is open, the user cannot tap on elements behind the dialog. Essentially the wrapper turns this dialog into a modal dialog.
  There is one exception to this though. While the wrapper blocks the main page from taps, its dimensions do not extend over the page's
  <ActionBar>. Therefore, if your page uses an
  <ActionBar>, the user will be able to interact with any controls you put in it while the dialog is open.
  For example, suppose you had an
  <ActionItem> in your app that performed a sharing action. Something like this:
  <ActionItem text="Share" (tap)="share()"></ActionItem>
  import { Component } from "@angular/core"; @Component({ ... }) export class HomeComponent { dialogOpen = false; share() { // Sharing code here } showDialog() { ... } closeDialog() { ... } }
  In this example, the user could perform the sharing action while the dialog is open. This might be okay for your app and your scenario. But if it isn't, the simplest way to prevent the action is with a simple
  if check. For example, note the use of
  if (this.dialogOpen) in the code below.
  import { Component } from "@angular/core"; @Component({ ... }) export class HomeComponent { dialogOpen = false; share() { if (this.dialogOpen) { return; } // Sharing code here } showDialog() { ... } closeDialog() { ... } }
  Wrapping Up
  Ultimately, how you choose to configure this sample is up to you, based on the needs of your app. Feel free to copy this approach verbatim, or to customize this structure to meet your needs.
  A polished version of this sample is available for Angular, Vue.js, and NativeScript Core using the links below. Feel free to use them, and if you come up with any fun customizations, please list them in the comments below.
  TIP: This simple dialog is one of many samples available for free in NativeScript Marketplace. Check out the full list of samples, and even contribute your own
  Published at DZone with permission of Tj VanToll , DZone MVB. See the original article here.
  Opinions expressed by DZone contributors are their own.
  {{ parent.title || parent.header.title}}
  {{ parent.tldr }}
  {{ parent.linkDescription }}{{ parent.urlSource.name }}