Pass params to modal


#1

I’m trying to pass params to a modal that pops open. If I do a console.log in the modal component of the params, I have the param, but the modal won’t display it.

<GridLayout rows="*,auto">
    <StackLayout row="0" id="img-holder">
        <Label [text]="img"></Label>
            <Image [src]="img" class="largeImage"></Image>
    </StackLayout>
    
    <FlexboxLayout row="1">
        <Button text="Close" (tap)="closeModal($event)" class="btn btn-primary"></Button>
    </FlexboxLayout>
</GridLayout>

In my component:

@Component({
    selector: 'largeimage',
    templateUrl: './pages/player/templates/modals/largeimage.component.html',
    styleUrls: ['./pages/player/templates/modals/largeimage.component.scss']
})
export class LargeImageComponent implements OnInit {
    constructor(private mParams: ModalDialogParams) {
        this.img = this.mParams.context.img;
     }

     public img: String;

    ngOnInit(): void { 
        console.log("In image modal: ", this.img);
    }

    closeModal(){
        this.mParams.closeCallback(null);
        console.log("Closing modal");
    }
}

notice the console.log in the ngOnInit. It logs the value, but in the template I can’t display the bound value in either the Label field or the image src. If I remove the binding and put in something hard coded, the template displays those just fine. Why is my modal not getting the params in the binding?

Here is how I am calling it from the component opening the modal, passing the image link in the _args

popModalImage(_args) {
        let imageContext = {
            img: _args
        }
        const options:ModalDialogOptions = {
            viewContainerRef: this.vcRef,
            context: imageContext,
            fullscreen: true
        }
        console.log(imageContext);
        this.modalService.showModal(LargeImageComponent, options)
            .then(res=>{
                console.log(res);
            });         
        }

#2

I’m using modal and this is normal for me. I’m using this way:

public showModal(checklist) {
    let options = {
      context: {
        username: checklist.NOMEMOT,
        cpf: checklist.CPFMOT,
        batida: checklist.DTBATIDA,
        documents: checklist.DOCS.QTDOCUMENTOS ? checklist.DOCS.QTDOCUMENTOS : 0
      },
      fullscreen: true,
      viewContainerRef: this.vcRef
    };
    this.modal.showModal(InfoDriverComponent, options);
  }

My modal html:

<ScrollView class="info-driver">
  <StackLayout horizontalAlignment="center" verticalAlignment="center" class="info-driver-light">

    <GridLayout class="info" columns="auto, *">
      <Label col="0" [text]="'mdi-person' | fonticon" class="mdi"></Label>
      <Label col="1" textWrap="true" [text]="parans.username"></Label>
    </GridLayout>

    <GridLayout class="info" columns="auto, *">
      <Label col="0" [text]="'mdi-assignment-ind' | fonticon" class="mdi"></Label>
      <Label col="1" textWrap="true" [text]="parans.cpf"></Label>
    </GridLayout>

    <GridLayout class="info" columns="auto, *">
      <Label col="0" [text]="'mdi-alarm' | fonticon" class="mdi"></Label>
      <Label col="1" textWrap="true" [text]="parans.batida"></Label>
    </GridLayout>

    <GridLayout class="info" columns="auto, *">
      -<Label col="0" [text]="'mdi-insert-drive-file' | fonticon" class="mdi"></Label>
      <Label col="1" [text]="parans.documents"></Label>
    </GridLayout>


    <StackLayout>
      <button class="btn  btn-primary btn-active" text="Fechar" (tap)="close()"></button>
    </StackLayout>
  </StackLayout>

</ScrollView>

My typescript :

import { Component, OnInit } from '@angular/core';
import { ModalDialogParams } from 'nativescript-angular';
import { TNSFontIconService } from 'nativescript-ng2-fonticon';

@Component({
  moduleId: module.id,
  selector: 'app-info-driver',
  templateUrl: './info-driver.component.html',
  styleUrls: ['./info-driver.component.scss']
})
export class InfoDriverComponent implements OnInit {

  public parans:any;

  constructor(private params: ModalDialogParams, private fonticon: TNSFontIconService) { }

  ngOnInit() {
    this.parans = this.params.context;    
  }

  public close(res: string) {
    this.params.closeCallback();
  }

}

See if something helps you.


#3

Thank you. For some reason I had to add a (loaded)=“onModalLoaded($event)” event to the modal. I didn’t really have to add any logic to the onModalLoaded but having it allowed the params to show up in the html template. I’m not exactly sure why that was, but now it is working.

onModalLoaded(args: EventData){
        let obj = args.object;
    }

#4

that’s crazy hehe but greater than your solution it’s working