title: Need to do page refresh for reflecting new changes in the UI
body: <p>I am using angular6, and for showing some records i am using angular material data table.</p>
  
  <p>When i  save or delete any customer, the changes are persisting in DB but not reflecting in the UI, i need to do page refresh for reflecting the changes.</p>
  
  <p>I have given the code on below, first it will load customerList then customer component as a popup</p>
  
  <p>I am doing Rest Call for CRUD operations.</p>
  
  <pre><code>customerList.component.ts
  **************************
  
  import { Component, OnInit } from '@angular/core';
  import { UserService } from '../services/user.service';
  import { MatTableDataSource,MatDialog,MatDialogConfig } from '@angular/material';
  import { CustomerComponent } from '../customer/customer.component';
  
  @Component({
    selector: 'customer-list',
    templateUrl: './customer-list.component.html',
    styleUrls: ['./customer-list.component.css']
  })
  export class CustomerListComponent implements OnInit {
  
    dataSource;
    searchKey:string;
  
    displayedColumns = ['name','actions'];
  
    constructor(private service : UserService,
                private dialog : MatDialog) { }
  
    ngOnInit() {
      this.fetchCustomer();
    }
  
    onSearchClear(){
      this.searchKey="";
      this.applyFilter();
    }
  
    applyFilter(){
      this.dataSource.filter = this.searchKey.trim().toLowerCase();
    }
  
    newCustomer(){
      this.service.initializeForm();
      const dialogConfig = new MatDialogConfig();
      //dialogConfig.disableClose = true;
      dialogConfig.autoFocus = true;
      dialogConfig.width = "60%";
      this.dialog.open(CustomerComponent, dialogConfig).afterClosed().subscribe(() =&gt; this.fetchCustomer());
    }
  
  
    viewCustomer(customer){
      console.log(event.target);
      this.service.populateForm(customer);
      const dialogConfig = new MatDialogConfig();
      //dialogConfig.disableClose = true;
      dialogConfig.autoFocus = true;
      dialogConfig.width = "60%";
      this.dialog.open(CustomerComponent,dialogConfig);
    }
  
    editCustomer(customer){
      this.service.populateForm(customer);
      console.log(customer);
      const dialogConfig = new MatDialogConfig();
      //dialogConfig.disableClose = true;
      dialogConfig.autoFocus = true;
      dialogConfig.width = "60%";
      this.dialog.open(CustomerComponent,dialogConfig);
    }
  
  
      deleteCustomer(id){
      this.service.deleteCustomerData(id).subscribe(
        data =&gt; console.log("success", data),
        error =&gt; console.error("Error!",error)
      );
      this.populateTable();
    }
  
    fetchCustomer(){
      this.service.getUser().subscribe( results =&gt; {
        if(!results){
  
          return;
        }
        console.log(results);
        this.dataSource = new MatTableDataSource(results);
    })
    }
  }
  
  customerList.component.html
  *******************************
  
  &lt;h1&gt;Customer-List&lt;/h1&gt;
  &lt;div class="search-div"&gt;
      &lt;button mat-raised-button (click)="newCustomer()" style="position: absolute; right: 0;"&gt;
        &lt;mat-icon&gt;add&lt;/mat-icon&gt;New Customer
      &lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;mat-table [dataSource]="dataSource"&gt;
        &lt;ng-container matColumnDef="name"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; Name &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let user"&gt;&lt;a href&gt;{{user.name}}&lt;/a&gt;&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef="actions"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt;Actions &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt;
            &lt;button mat-icon-button matTooltip="Click to View" (click)="viewCustomer(row)" class="iconbutton" color="primary"&gt;
                  &lt;mat-icon&gt;visibility&lt;/mat-icon&gt;
                &lt;/button&gt;
            &lt;button mat-icon-button matTooltip="Click to Edit" (click)="editCustomer(row)" class="iconbutton" color="primary"&gt;
                &lt;mat-icon&gt;edit&lt;/mat-icon&gt;
              &lt;/button&gt;
            &lt;button mat-icon-button matTooltip="Click to Delete" (click)="deleteCustomer(row)" class="iconbutton" color="warn"&gt;
                &lt;mat-icon&gt;delete&lt;/mat-icon&gt;
              &lt;/button&gt;
          &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
        &lt;mat-row *matRowDef="let row; columns:displayedColumns"&gt;&lt;/mat-row&gt;
      &lt;/mat-table&gt;
    &lt;/div&gt;
  
  
  customer.component.ts
  **********************
  import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormControl,FormBuilder,Validators } from '@angular/forms';
  import { MatDialogRef } from '@angular/material';
  import { UserService } from '../services/user.service';
  
  @Component({
    selector: 'app-customer',
    templateUrl: './customer.component.html',
    styleUrls: ['./customer.component.css']
  })
  export class CustomerComponent implements OnInit {
  
    constructor(private customerService : UserService,
                public dialogRef : MatDialogRef&lt;CustomerComponent&gt;) { }
  
    ngOnInit() {
      this.customerService.getUser();
    }
  
    onSubmit(){
      this.customerService.customerData(this.customerService.cutsomerForm.value).subscribe(
        data =&gt; console.log("success", data),
        error =&gt; console.error("Error!",error)
      );
     this.onClose();
    }
  
    onClose(){
      this.clearForm();
      this.dialogRef.close();
    }
  
    clearForm(){
      this.customerService.cutsomerForm.reset();
      //this.customerService.initializeForm();
    }
  }
  
  customer.component.html
  *************************
  
  &lt;div class="container-fluid"&gt;
      &lt;h2&gt;New Customer&lt;/h2&gt;
      &lt;form [formGroup]="customerService.cutsomerForm" (ngSubmit)="onSubmit()" #newCustomer="ngForm"&gt;
        &lt;div class="form-group"&gt;
          &lt;label&gt;Customer Name&lt;/label&gt;
          &lt;input [class.is-invalid]="customerService.cutsomerForm.get('name').invalid &amp;&amp;
                                     customerService.cutsomerForm.get('name').touched" formControlName = "name" type="text" class="form-control"&gt;
        &lt;/div&gt;
        &lt;input type="hidden" formControlName="id"&gt; 
  
        &lt;div class="form-group"&gt;
          &lt;label&gt;userName&lt;/label&gt;
          &lt;input formControlName = "username" type="text" class="form-control"&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label&gt;email&lt;/label&gt;
          &lt;input formControlName = "email" type="text" class="form-control"&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
          &lt;label&gt;phone&lt;/label&gt;
          &lt;input formControlName = "phone" type="text" class="form-control"&gt;
        &lt;/div&gt;
  
        &lt;div&gt;
          &lt;button class="btn btn-primary" [disabled] = !newCustomer.valid type="submit"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
  
      &lt;/form&gt;
      &lt;button class="btn btn-danger" (click)="clearForm()"&gt;Clear&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>user.service.ts</p>
  
  <hr>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  import { Customer } from '../models/Customer.model';
  import { FormGroup, FormControl,FormBuilder,Validators } from '@angular/forms';
  
  @Injectable({
    providedIn: 'root'
  })
  export class UserService {
  
   private serviceUrl = "https://jsonplaceholder.typicode.com/users";
  
    // private findAllCustomers = "http://localhost:8080/findAllCustomers";
  
    // private insertNewCustomer = "http://localhost:8080/addCustomer";
  
    constructor(private http : HttpClient,
      private fb : FormBuilder) { }
  
    cutsomerForm = this.fb.group({
      id : [''],
      name : ['',Validators.required],
      username : [''],
      email : [''],
      phone : ['']
    })
  
    initializeForm(){
      this.cutsomerForm.setValue({
        id : '',
        name : '',
        username : '',
        email : '',
        phone : ''
      });
    }
  
    getUser() : Observable&lt;Customer[]&gt; {
        return this.http.get&lt;Customer[]&gt;(this.serviceUrl);
    }
  
    customerData(customer: Customer): Observable&lt;Customer&gt; {
      return this.http.post&lt;Customer&gt;(this.serviceUrl,customer);
    }
  
    populateForm(customer){
      this.cutsomerForm.setValue(customer);
    }
  }
  </code></pre>