I have a user management component (gestion-usuarios) that displays a list with all users. Within this component there is a button to add a new user. Clicking on this button opens a modal (a new component,nuevo-usuario-modal)with a form that fills it out and clicking on a save button that has the modal passes that new user to the user management component. It works but it doesn't dynamically update the user list with the new user. I use MatDialogRef.
how can I update the user list dynamically? I want to reload only that component not the whole page.
nuevo-usuario-modal.component.html
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
<button type="button" class="close" aria-label="Close" (click)="cerrar()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="dniCliente">DNI</label>
<input id="dniCliente" class="form-control" name="dniCliente" [(ngModel)]="nuevoUsuario.dniCliente">
<label for="nombre">Nombre</label>
<input id="nombre" class="form-control" name="nombre" [(ngModel)]="nuevoUsuario.nombre">
<label for="direccion">Direccion</label>
<input id="direccion" class="form-control" name="direccion" [(ngModel)]="nuevoUsuario.direccion">
<label for="email">Email</label>
<input id="email" class="form-control" name="email" [(ngModel)]="nuevoUsuario.email">
<label for="pwd">Contraseña</label>
<input id="pwd" class="form-control" name="pwd" [(ngModel)]="nuevoUsuario.pwd">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" [mat-dialog-close]="nuevoUsuario" (click)="guardarUsuario()">Guardar</button>
</div>
nuevo-usuario-modal.component.ts
import { Component, Output, EventEmitter,OnInit, ChangeDetectorRef, Inject } from '@angular/core';
import { MatDialogRef,MAT_DIALOG_DATA } from '@angular/material/dialog';
import { IUsuario } from 'interfaces/iusuario';
import { UsuariosService } from '../usuarios.service';
import { DataService } from '../data.service';
@Component({
selector: 'nuevo-usuario-modal',
templateUrl: './nuevo-usuario-modal.component.html',
styleUrls: ['./nuevo-usuario-modal.component.css']
})
export class NuevoUsuarioModalComponent implements OnInit {
closeResult = '';
title = "Nuevo cliente"
usuarios: IUsuario[] = [];
nuevoUsuario: IUsuario = {
direccion: "",
dniCliente: "",
email: "",
nombre: "",
pwd: "",
};
constructor(public dialogRef: MatDialogRef<NuevoUsuarioModalComponent>,@Inject(MAT_DIALOG_DATA) public data,
public ServicioUsuarios: UsuariosService,
private dataService: DataService){}
@Output() recargar = new EventEmitter();
guardarUsuario() {
this.ServicioUsuarios.crearUsuario(this.nuevoUsuario).subscribe(() => {
this.dataService.usuarios.push(this.nuevoUsuario);
console.log(this.dataService.usuarios);
});
}
cerrar() {
this.dialogRef.close();
}
ngOnInit() {}
}
gestion-usuarios.component.html
<div>
<p class="p-2">Gestión de usuarios <button type="button" class="btn btn-primary" (click)="abrirModalNuevoUsuario()">Nuevo usuario</button></p>
<div>
<form class="form">
<div class="col-sm-5">
<input type="text" [(ngModel)]="filtro" class="form-control"
name="filtroNombre" id="filtroNombre" placeholder="Filtrando por...">
</div>
</form>
</div>
<div *ngFor="let usuario of usuarios | nombreUsuarioFiltro:filtro" class="p-2 divUsuariosIndividual">
<div class="p-2 m-2">{{usuario.dniCliente}}</div>
<div class="p-2 m-2">{{usuario.nombre}}</div>
<div class="p-2 m-2">{{usuario.direccion}}</div>
<div class="p-2 m-2">{{usuario.email}}</div>
<button type="button" class="btn btn-primary" (click) = "editar(usuario)">Editar</button>
<button type="button" class="btn btn-danger" (click) = "borrar(usuario.dniCliente)" >Borrar</button>
</div>
gestion-usuarios.component.ts
import { Component, OnInit, Output,EventEmitter, OnChanges, ChangeDetectorRef } from '@angular/core';
import { UsuariosService } from '../usuarios.service';
import { IUsuario } from '../../../interfaces/iusuario';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { NuevoUsuarioModalComponent } from '../nuevo-usuario-modal/nuevo-usuario-modal.component'
import { EditarUsuarioModalComponent } from '../editar-usuario-modal/editar-usuario-modal.component';
import { DataService } from '../data.service';
@Component({
selector: 'gestion-usuarios',
templateUrl: './gestion-usuarios.component.html',
styleUrls: ['./gestion-usuarios.component.css']
})
export class GestionUsuariosComponent implements OnInit,OnChanges {
filtro: string = '';
u: IUsuario = {
direccion: "",
dniCliente: "",
email: "",
nombre: "",
pwd: "",
}
constructor(
public ServicioUsuarios: UsuariosService,
private dialog: MatDialog,public dataServicio: DataService
) { }
borrar(dniCliente): void {
var confirmacion = confirm("¿Seguro que quieres eliminar el usuario?");
if (confirmacion) {
this.ServicioUsuarios.borrarCliente(dniCliente).subscribe(() => this.ServicioUsuarios.getUsuariosArray().subscribe(
recibe => this.usuarios = recibe,
error => console.log(error),
));
}
}
abrirModalNuevoUsuario() {
const dialogRef = this.dialog.open(NuevoUsuarioModalComponent);
dialogRef.afterClosed().subscribe(result => {
console.log(result);
this.usuarios.push(result);
console.log(this.usuarios);
})
}
editar(usuario) {
this.dialog.open(EditarUsuarioModalComponent,{data: usuario});
}
usuarios: IUsuario[] = [];
ngOnInit() {
this.usuarios = this.dataServicio.getUsuarios();
this.ServicioUsuarios.getUsuariosConsola();
this.ServicioUsuarios.getUsuariosArray().subscribe(
recibe => {
this.usuarios = this.dataServicio.getUsuarios();
this.usuarios = recibe;
},
error => console.log(error),
);
}
ngOnChanges(){
this.ngOnInit();
}
}
data.service.ts
import { Injectable, OnInit } from '@angular/core';
import { IUsuario } from 'interfaces/iusuario';
@Injectable({
providedIn: 'root'
})
export class DataService {
usuarios: IUsuario[] = [];
getUsuarios() {
return this.usuarios;
}
}
