angularngx-bootstrapngx-modal

Ngx-bootstrap modal: how to pass data to the modal component.ts instead of to the html template?


I'm able to collect the data passed in the initialState object, for example in this fragment of code:

   const initialState = {
        titulo: titulo,
        origen: origen,
        th1: "Número",
        th2: "Nombres",
        modalFor: "Locales"
      };
      this.bsModalRef = this.modalService.show(ClienteOlocalPopUpComponent, {
        initialState,
        backdrop: "static",
        keyboard: false
      });

and interpolate its properties in the ClienteOlocalPopUpComponent.html.

But if I wanted the values passed to the modal in const initialState to be, let's say, get printed in the console in the ngOnInit() method of ClienteOlocalPopUpComponent.ts ¿How can I achieve that? It is not recognized in the .ts file of the modal.

Thanks.

this is the code of the component that launches the modal:

 openModal(origen, titulo) {
    this.origen = origen;

    if (origen === "cliente") {
      const initialState = {
        titulo: titulo,
        origen: origen,
        th1: "RUT",
        th2: "Nombres",
        modalFor: "Clientes",
        rutClientes: this.requestTres.rutCliente,
        rutOperador: this.requestTres.rutOperador
      };
      this.bsModalRef = this.modalService.show(ClienteOlocalPopUpComponent, {
        initialState,
        backdrop: "static",
        keyboard: false
      });
    } 
    else if (origen === "local") {
      if (!this.forma.controls.rutCliente.value) {
        swal("Seleccione un cliente", "", "warning");
      } else {
        // tslint:disable-next-line: max-line-length / crecion del request para locales

        this.documentosService.localRequest.rutCliente = this.requestTres.rutCliente = parseInt(
          this.forma.controls.rutCliente.value.toString().slice(0, -1),
          10
        );
        this.documentosService.localRequest.rutOperador = this.rutOperador;

        let initialState = {
          titulo: titulo,
          origen: origen,
          th1: "Número",
          th2: "Nombres",
          modalFor: "Locales",
          rutClientes: this.requestTres.rutCliente,
          rutOperador: this.requestTres.rutOperador
        };

        this.bsModalRef = this.modalService.show(ClienteOlocalPopUpComponent, {
          initialState,
          backdrop: "static",
          keyboard: false
        });
      }
    }
  }

and this is the .ts of the modal:

import { DocumentosService } from './../../../core/consultaService/documentos.service';
import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { ConsultasService } from '../../../core/consultaService/consultas.service';

import {
  FormGroup,
  FormBuilder,
  Validators,
  FormControl
} from '@angular/forms';
import { ClientesService } from '../../../core/consultaService/clientes.service';


@Component({
  selector: 'app-cliente-o-local-pop-up',
  templateUrl: './clienteOlocalPopUp.component.html',
  styleUrls: ['./clienteOlocalPopUp.component.scss']
})
export class ClienteOlocalPopUpComponent implements OnInit {

  origen: string;
  titulo: string;
  forma: FormGroup;
  forma2: FormGroup;
  clientes: any;
  clientesData: any;
  cliente: any;
  cargando = false;


  constructor(
    public bsModalRef: BsModalRef,
    private clientesService: ClientesService,
    private consultasService: ConsultasService,
    private documentosService: DocumentosService
  ) {
    this.forma2 = new FormGroup({
      nombreCliente: new FormControl(),
      modalFor: new FormControl()
    });
  }

  ngOnInit() {

    console.log(this.initialState); // initiaState is highlighted as if does not exist.

  }
}

initialStateis highlighted as if does not exist despite it was passed in.


Solution

  • Please note that the initialState object that you pass in this.modalService.show is not passed in as a property to your component it only contains the properties of your component that are gonna be updated, it doesn't initialize an initialState property

    if you show the modal like

    const initialState = {
            titulo: titulo,
            origen: origen,
            th1: "Número",
            th2: "Nombres",
            modalFor: "Locales"
          };
          this.bsModalRef = this.modalService.show(ModalComponent , {
            initialState,
            backdrop: "static",
            keyboard: false
          });
    

    then the properties that are initialized in yor modal component are titulo, origen, th1, th2 and modalFor. If you want an initialState property initialized in that component then you must do something like

    const initialState = {
                titulo: titulo,
                origen: origen,
                th1: "Número",
                th2: "Nombres",
                modalFor: "Locales"
              };
              this.bsModalRef = this.modalService.show(ModalComponent , {
                initialState : {initialState},
                backdrop: "static",
                keyboard: false
              });
    

    That's why when you say console.log(this.initialState); it gives undefined, it should be console.log(this.titulo); or any other property that you decide