0

Estoy intentando crear un componente modal común de ngx-bootstrap en Angular.

He buscado en internet y he probado esta forma.

import { Component } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';

/* This is the Component from which we open the Modal Component */
@Component({
  selector: 'my-component',
  templateUrl: './service-component.html'
})
export class MyComponent {
  bsModalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  public openModalWithComponent() {
    /* this is how we open a Modal Component from another component */
    this.bsModalRef = this.modalService.show(ModalContentComponent);
  }
}

/* This is the Modal Component */
@Component({
  selector: 'child-modal',
  template: `
    <div class="modal-header">
      <h4 class="modal-title pull-left">Title</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Close</button>
    </div>
  `
})
export class ChildModalComponent {
  constructor(public bsModalRef: BsModalRef) {}
}

<button type="button" class="btn btn-primary" (click)="openModalWithComponent()">Create modal with component</button>

<child-modal #childModal ></child-modal>

Pero me dice 'Cannot find name 'ModalContentComponent'

Y yo la verdad es que no entiendo de donde sacan eso, aunque a otras personas parece funcionarles.

1 respuesta 1

1

Finamente he seguido este otro tutorial que si me ha funcionado.

En el realizan el siguiente ejemplo para añadir items a un array:

Primero creamos un componente simple ItemList para mostrar una lista de elementos añadidos a un Array.

ng g c itemList

item-list.component.html

<div>
    <h1> Item List </h1>
    <ul>
    <li *ngFor=”let item of itemList”>{{item}}</li>
    </ul>
    <button type=”button” class=”btn btn-primary”>Add New Item</button>
</div>

item-list.component.ts

export class ItemListComponent implements OnInit {
  itemList = ["Book","Pen"]
  constructor() { }
  ngOnInit() {
  }
}

Después creamos otro componente para utilizarlo como modal.

ng g c itemAdd

El segundo componente para añadir un nuevo item, que se utilizará como un modal en el futuro. Además, he escrito una simple función llamada saveToList() que también implementaré en el futuro. Por ahora, he puesto un simple registro de consola, sólo para mostrar el valor en el campo de entrada.

numberOfItems será el recuento de elementos en el array existente.

item-add.component.html

<div class="modal-body">
    <h4>Add Item</h4>
    <form [formGroup]="itemform" (ngSubmit)="saveToList(itemform)">
        <div class="col-md-6">
            <label>Number of Items : </label> {{numberOfItems}}
        </div>
        <div class="col-md-6">
            <label>Item Name</label>
        </div>
        <div class="col-md-6">
            <input type="text" class="form-control" formControlName="name">
            <button class="button mt-1" type="submit">Save</button>
        </div>
    </form>
<div>

item-add.component.ts

export class ItemAddComponent implements OnInit {
     itemform;
     numberOfItems = 0;
     constructor(private formBuilder: FormBuilder) {
         this.itemform = this.formBuilder.group({
         name: ""
         })
     }

     ngOnInit() {
     }

     saveToList(form) {
        console.log(form.value);
     }
}

Añadir un modal.
Vamos a cambiar el código para abrir el formulario de adición de elementos como un modal al hacer clic en el botón de adición de nuevos elementos.

item-list.component.ts

export class ItemListComponent implements OnInit {
 itemList = ["Book","Pen"];
 bsModalRef: BsModalRef;
 constructor(private modalService: BsModalService) { }
 
 ngOnInit() {
 }
 
 openModalWithComponent() {
   this.bsModalRef = this.modalService.show(ItemAddComponent);
   this.bsModalRef.content.closeBtnName = 'Close'; 
 }
}

No olvides añadir ItemAddComponent en la lista de entryComponents en app.module.ts

providers: [],
entryComponents: [ItemAddComponent],

Pasar valores del padre a la modal.
Podemos utilizar simplemente initialState para pasar un valor inicial al modal.

item-list.component.ts

openModalWithComponent() {
    const initialState = {
        list: [
            "test"
        ]
    };
    this.bsModalRef = this.modalService.show(ItemAddComponent, {initialState});
    this.bsModalRef.content.closeBtnName = 'Close'; 
}

Para leer este valor desde la modal de add Item hay que inicializar una lista dentro del modal item-add.component.ts

list: any[] = [];

Entonces la lista initialState puede acceder como "list[]".
Estamos enviando un dato de muestra "test" y se puede acceder como list[0] desde item-add.component.html

<label>Number of Items : </label> {{list[0]}}

Piensa que queremos pasar un objeto de la lista de elementos a la modal.

item-list.component.ts

openModalWithComponent() {
  const initialState = {
    list: [
      {"tag":'Count',"value":this.itemList.length}
    ]
  };
  this.bsModalRef = this.modalService.show(ItemAddComponent, {initialState});
  this.bsModalRef.content.closeBtnName = 'Close'; 
}

--

<label>Number of Items : </label> {{list[0].value}}

Pasar valores desde el modal al padre.
Veamos cómo pasar un valor a la lista de elementos desde el formulario de añadir elementos. Declara un EventEmitter dentro del item-add.component.ts

public event: EventEmitter<any> = new EventEmitter();

Emite un evento al darle a guardar.

triggerEvent(item: string) {
    this.event.emit({ data: item , res:200 });
}

item-add.component.ts

export class ItemAddComponent implements OnInit {
  itemform;
  numberOfItems = 0;
  list: any[] = [];
  public event: EventEmitter<any> = new EventEmitter();
  constructor(private formBuilder: FormBuilder, public bsModalRef: BsModalRef) {}

  ngOnInit() {
    this.itemform = this.formBuilder.group({
      name: ""
    })
  }

  saveToList(form) {
    this.triggerEvent(form.value.name);
    this.bsModalRef.hide();
  }

  triggerEvent(item: string) {
    this.event.emit({ data: item , res:200 });
  }
}

Y dentro del item-list.component.ts podemos suscribirnos al event emitter.

item-list.component.ts

openModalWithComponent() {
  const initialState = {
    list: [
      {"tag":'Count',"value":this.itemList.length}
    ]
  };
  this.bsModalRef = this.modalService.show(ItemAddComponent, {initialState});
  this.bsModalRef.content.closeBtnName = 'Close';

  this.bsModalRef.content.event.subscribe(res => {
    this.itemList.push(res.data);
  });
}

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.