Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 829 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Open an Angular component in a native iOS and Android popup modal

5:32 Angular 2 lesson by

Let’s build a new Angular component and use NativeScript for Angular’s ModalDialogService to open it in a native modal. We will also look at special considerations with handling the close action in addition to passing data between the modal and the caller.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Let’s build a new Angular component and use NativeScript for Angular’s ModalDialogService to open it in a native modal. We will also look at special considerations with handling the close action in addition to passing data between the modal and the caller.

Avatar
Guru

Hi

I can not get the modal thing running properly on Android. I followed same cast above but the modal box shows more like overlay and can see my previous view with modal view. Im running on Android 6P emulator API level 23.

about.component.ts->
public openModal(){
        let currentDate = new Date();
        let options: ModalDialogOptions = {
            context: {msg: 'Hello'},
            //context: currentDate,
            fullscreen: false,
            viewContainerRef: this.viewRef
        };

        this.modal.showModal(ModalViewComponent, options).then((result) => {
            console.log(result);
        });
    }
Detail.component.html
<ActionBar title="Detail" icon="" class="action-bar" backgroundColor="#589D05" color="white" >
  <NavigationButton text="Back"  (tap)="goBack()" android.systemIcon="ic_menu_back"></NavigationButton>
</ActionBar>
<StackLayout>
  <Label text="Detail Info" class="h1"></Label>
  <Label text="Even more awesome videos workshops and info." class="h3" textWrap="true"></Label>
</StackLayout>

Detail.component.ts
import {Component} from '@angular/core';
import { RouterExtensions } from 'nativescript-angular/router';

@Component({
    moduleId: module.id,
    selector: 'detail',
    templateUrl: 'detail.component.html'
})
export class DetailComponent {
    constructor(private router: RouterExtensions) { }

    public goBack() {
        this.router.back();
    }
}

``
In reply to egghead.io
Avatar
Guru

Please ignore i was missing couple of things.

1st css on details component
2nd no GridLayout for title bar

now it looks as per above webcast. thank you

In reply to Guru

To open a component in a modal dialog, you first want to import from NativeScript Angular Directives Dialogs. This will give us the modal dialog service.

We can inject that into our about component. Let's add a function that will open our modal and you'll see that we have show modal. It takes a component type. Let's open our detail component from this about component.

Let's import detail component and we'll specify our detail component to open here. Then, it takes modal dialog options. Let's also import the modal dialog options and we'll define some options here. One of those options is the context, and that's a way we can pass data to our component. Let's just pass a message and say, "Hello."

We'll pass those options here and that returns a promise that will resolve with data that we could pass back from our modal. In this case, let's say, "Result." We'll just simply log the result out here.

Now, let's just wire up our open modal action. Let's replace the NS router link button. We'll wire up a tab event to open modal. When we run that and we click Read More, we get a hard crash.

This is because the modal dialog options require a ViewContainerRef to be passed in with the modal dialog options. Let's make that change now. We just need to import ViewContainerRef and inject that here. Then, we'll pass that along as the option here.

When we run that now, go to about and click Read More, you'll see our modal open, but interestingly, we have no action bar and therefore no way to close it.

Our detail component had an action bar on it, but these are ignored when it's opened in a modal. Instead of using an action bar here, we can create our own. We'll use a grid layout. We'll set auto on the real height.

We'll have auto, a flexible container in the middle and auto width on the third column. We'll just place a button on the left here. This will become our close button, and then, we want to wire up a close action here.

Let's set its real position and column position. Then here, we'll add a label and this will be our title detail. Let's add a row and a column position here.

Let's class this as action bar. This comes from the default theme installed. We'll class these as action items. This will class as action bar title. Now, we need to wire up our close action. Let's add a close action here. We want to import from NativeScript Angular Directives Dialogs and we want the modal dialog params.

These we can inject and then use these to actually call the close call back, which we have the opportunity to pass back data to the caller. In this case, let's just say that we closed the modal.

If you recall in our about component, we are just going to log out that result. We also have this message being passed as the context to the detail component.

We can handle that much in the same way with our params. We can say, "Params.context," and we would have that message available. Let's cancel log that so when the detail component shows we will see that.

Now when we run this and we open, we will get another crash. This crash is actually related to more than one layout child inside a content view.

This is coming from our detail component here, and if you notice, this is using a grid layout and a stack layout parallel to each other which is not allowed. We want to wrap this inside of the stack layout and take these two layout containers and put them inside. There needs to be only one layout container at the root.

This is different than when there's an action bar. You can have an action bar above that is parallel to your main layout container. Now, if we open the modal we'll see we have our action bar here from the grid layout. The action bar classes just provide coloring and bolding on the action bar title. Let's just add a little bit of spacing to make that look a little bit better.

We'll just add P10 and on our action bar title, let's make sure that it is take center. This time when we take a look, we'll see it's looking a little bit better, but our detail is still not centered correctly and this is because the grid layout, we have a third column here set to auto with nothing in it. This flexible container is actually stretching across both column one and two. We have two ways we could go.

We could end up adding a third button if we needed that in the third column position, or we can use exact widths on left and right columns here. Let's just say 75. Looking at that now we can see we have a nicely centered title here. When we close the dialog we can see close the modal dialog options.

When we open it, we can also see the hello that we're passing to the detail component. On the android, we can see the same behavior and Native Android dialog open which also closes the same.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?