The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

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

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

5:32
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.
Watch this lesson now
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
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?