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);
});
}