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.
}
}
initialState
is highlighted as if does not exist despite it was passed in.
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