1

Estoy trabajando en una aplicación angular en la cual tengo un componente hijo dentro de un componente padre. Básicamente el componente hijo consta de un botón que al presionarlo despliega un popup donde el usuario tiene la opción de introducir una cadena de texto. A esta cadena se la concatena con otra (dentro del fichero typescript del hijo) para formular un mensaje. La idea es que el mensaje se pase al componente padre para se desplegado por el mismo. Es decir que cuando el usuario presione el botón guardar cambios del popup, se actualice automáticamente el componente padre con el mensaje.

Al ejecutarse la aplicación se tiene la siguiente vista:

Vista inicial

Cuando se presiona el botón "Open the Popup" se observa:

Vista intermedia

Luego de que el usuario introduce un color y presiona el botón save, debe actualizarse el componente padre para obtener un resultado como el siguiente:

Vista deseada

Estoy realizando estas pruebas en StackBlitz para dejar el enlace, pero de todos modos voy a introducir aquí el código html y typescript de cada componente.

El componente padre se denomina grafico. El fichero HTML es:

<div>
  <p>{{color}}</p>
</div>
<hr>

<app-popup></app-popup>

Su fichero typescript es:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-grafico',
  templateUrl: './grafico.component.html',
  styleUrls: ['./grafico.component.css']
})
export class GraficoComponent implements OnInit {
  private color: string;

  constructor() { 
    this.color="Escribe un color: ";
  }

  ngOnInit() {
  }

}

El componente hijo se denomina popup y tiene la siguiente plantilla:

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Escribe un color</h4>
    <button type="button" class="close" aria-label="Close" 
            (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <input type="text" [(ngModel)]="color">
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" 
           (click)="modal.close('Save click')">Save</button>
  </div>
</ng-template>

<button class="btn btn-primary" (click)="open(content)">Open the 
        Popup</button>

El archivo typescript de popup es:

import { Component, OnInit } from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent implements OnInit {
  color: string;
  mensaje: string;

  constructor(private modalService: NgbModal) {
    this.color="";
   }

  ngOnInit() {}

  open(content:any) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic- 
     title'}).result.then((result) => {
      this.mensaje= "Has elegido el color: " + this.color;
      console.log(this.mensaje);
   });
  }

}

Este código es una simplificación de lo que esto intentando hacer, que es que el usuario pueda introducir un valor y se actualice el tamaño de un gráfico ( componente padre) automáticamente.

El enlace de StackBlitz es: Enlace

Desde ya muchas gracias, aprecio sus ayudas y sugerencias. Saludos.

1 respuesta 1

3

En tu caso te recomiendo usar un Output en el componente hijo: Cuando el componente hijo quiera informar de algo al padre, emitirá el dato.

En el componente hijo necesitas crear un atributo como éste:

@Output() private textoEmitido = new EventEmitter<string>();

La plantilla del padre tendrá algo como

<app-popup (textoEmitido)="actualizar($event)"></app-popup>

Entonces, cuando quieras emitir algo desde el hijo, usarás el EventEmitter:

this.textoEmitido.emit(texto);

Y el padre lo leerá con la función actualizar:

actualizar(datoDelPopup: string) {
   ...
}

Como puedes ver, es bastante sencillo, pero por si quieres ver más código te dejo un ejemplo funcionando aquí (Stackblitz)

1
  • Maravillosa solución. Me funciona excelente, muchas gracias por tu tiempo.
    – Lucas
    Commented el 27 sept. 2019 a las 15:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.