title: How to reload/update a template of a component in Angular using MatDialogRef
body: <p>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.</p>
  
  <p>how can I update the user list dynamically?  I want to reload only that component not the whole page.</p>
  
  <p><strong>nuevo-usuario-modal.component.html</strong></p>
  
  <pre><code>&lt;div class="modal-header"&gt;
    &lt;h4 class="modal-title" id="modal-basic-title"&gt;{{title}}&lt;/h4&gt;
    &lt;button type="button" class="close" aria-label="Close" (click)="cerrar()"&gt;
      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
    &lt;form&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="dniCliente"&gt;DNI&lt;/label&gt;
        &lt;input id="dniCliente" class="form-control" name="dniCliente" [(ngModel)]="nuevoUsuario.dniCliente"&gt; 
        &lt;label for="nombre"&gt;Nombre&lt;/label&gt;
        &lt;input id="nombre" class="form-control" name="nombre" [(ngModel)]="nuevoUsuario.nombre"&gt;
        &lt;label for="direccion"&gt;Direccion&lt;/label&gt;
        &lt;input id="direccion" class="form-control" name="direccion" [(ngModel)]="nuevoUsuario.direccion"&gt;
        &lt;label for="email"&gt;Email&lt;/label&gt;
        &lt;input id="email" class="form-control" name="email" [(ngModel)]="nuevoUsuario.email"&gt;
        &lt;label for="pwd"&gt;Contraseña&lt;/label&gt;
        &lt;input id="pwd" class="form-control" name="pwd" [(ngModel)]="nuevoUsuario.pwd"&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;button type="button" class="btn btn-outline-dark" [mat-dialog-close]="nuevoUsuario" (click)="guardarUsuario()"&gt;Guardar&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
    <hr>
  
  <p><strong>nuevo-usuario-modal.component.ts</strong></p>
  
  <pre><code>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&lt;NuevoUsuarioModalComponent&gt;,@Inject(MAT_DIALOG_DATA) public data,
     public ServicioUsuarios: UsuariosService,
      private dataService: DataService){}
  
    @Output() recargar = new EventEmitter();
  
  
    guardarUsuario() {
  
      this.ServicioUsuarios.crearUsuario(this.nuevoUsuario).subscribe(() =&gt; {
        this.dataService.usuarios.push(this.nuevoUsuario);
        console.log(this.dataService.usuarios);
      });
  
    }
  
    cerrar() {
      this.dialogRef.close();
    }
  
    ngOnInit() {}
  
  
  }
  </code></pre>
  
  <p><strong>gestion-usuarios.component.html</strong></p>
  
  <pre><code>&lt;div&gt;
  &lt;p class="p-2"&gt;Gestión de usuarios &lt;button type="button" class="btn btn-primary" (click)="abrirModalNuevoUsuario()"&gt;Nuevo usuario&lt;/button&gt;&lt;/p&gt;
  &lt;div&gt;
      &lt;form class="form"&gt;
          &lt;div class="col-sm-5"&gt;
          &lt;input type="text" [(ngModel)]="filtro" class="form-control"
          name="filtroNombre" id="filtroNombre" placeholder="Filtrando por..."&gt;
          &lt;/div&gt;
          &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div *ngFor="let usuario of usuarios | nombreUsuarioFiltro:filtro" class="p-2 divUsuariosIndividual"&gt;
      &lt;div class="p-2 m-2"&gt;{{usuario.dniCliente}}&lt;/div&gt;
      &lt;div class="p-2 m-2"&gt;{{usuario.nombre}}&lt;/div&gt;
      &lt;div class="p-2 m-2"&gt;{{usuario.direccion}}&lt;/div&gt;
      &lt;div class="p-2 m-2"&gt;{{usuario.email}}&lt;/div&gt;
      &lt;button type="button" class="btn btn-primary" (click) = "editar(usuario)"&gt;Editar&lt;/button&gt;
      &lt;button type="button" class="btn btn-danger" (click) = "borrar(usuario.dniCliente)" &gt;Borrar&lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>gestion-usuarios.component.ts</strong></p>
  
  <pre><code>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(() =&gt; this.ServicioUsuarios.getUsuariosArray().subscribe(
          recibe =&gt; this.usuarios = recibe,
          error =&gt; console.log(error),
        ));
      }
    }
  
    abrirModalNuevoUsuario() {
  
      const dialogRef = this.dialog.open(NuevoUsuarioModalComponent);
  
      dialogRef.afterClosed().subscribe(result =&gt; {
      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 =&gt; {
          this.usuarios = this.dataServicio.getUsuarios();
  
          this.usuarios = recibe;
        },
        error =&gt; console.log(error),
      );
  
    }
  
   ngOnChanges(){
     this.ngOnInit();
   }
  
  
  }
  </code></pre>
  
  <p><strong>data.service.ts</strong></p>
  
  <pre><code>import { Injectable, OnInit } from '@angular/core';
  import { IUsuario } from 'interfaces/iusuario';
  
  
  @Injectable({
    providedIn: 'root'
  })
  export class DataService {
  
    usuarios: IUsuario[] = [];
  
    getUsuarios() {
      return this.usuarios;
    }
  
  
  }
  </code></pre>