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

[00:00] 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.

[00:10] 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.

[00:26] 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."

[00:50] 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.

[01:05] 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.

[01:21] 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.

[01:41] 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.

[01:50] 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.

[02:04] 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.

[02:21] 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.

[02:32] 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.

[02:59] 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.

[03:16] 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.

[03:25] 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.

[03:41] 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.

[03:52] 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.

[04:10] 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.

[04:32] 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.

[05:00] 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.

[05:21] 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.