title: Angular 6: ERROR TypeError: Cannot read property 'afterClosed' of undefined
body: <p>I am learning a MEAN stack app with angular 6. Here I want to refresh the component after adding a new client/car/driver/booking or updating a new client/car/driver/booking. But after adding a new value, the component showing all the values doesn't update or refresh(not able to see the current value at that time), but when i route between component and then go back to the same component it updates and shows all the values.</p>
  
  <p>I am using <strong><code>afterClosed</code></strong> method of <strong><code>MATDialog</code></strong> to return all the clients value but there is an error 
  <strong>Error: Cannot read property 'afterClosed' of undefined</strong></p>
  
  <p>How to resolve it?</p>
  
  <p>Here is the <code>client ts</code> file.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Component,OnInit} from '@angular/core';
  import {MatDialog,MatDialogRef,MAT_DIALOG_DATA} from '@angular/material/dialog';
  import { IClient} from './client';
  import {Router,ActivatedRoute} from '@angular/router';
  import {ToastrService} from 'ngx-toastr';
  
  import {AddClientComponent} from './add-client/add-client.component';
  import {EditClientComponent} from './edit-client/edit-client.component';
  
  import {DialogService} from '../../dialog.service';
  import {ClientService} from './client.service';
  
  @Component({
    selector: 'app-clients',
    templateUrl: './clients.component.html',
    styleUrls: ['./clients.component.css']
  })
  export class ClientsComponent implements OnInit {
  
    public currentClient: IClient;
    clients: any;
    Client: any;
  
    addClientDialogRef: MatDialogRef &lt; AddClientComponent &gt; ;
    editClientDialogRef: MatDialogRef &lt; EditClientComponent &gt; ;
  
    constructor(public dialog: MatDialog,
      private dialogService: DialogService,
      private clientService: ClientService,
      private router: Router) {}
  
    openAddClientDialog() {
      this.dialogService.open(AddClientComponent, {
        width: '500px'
      });
  
    }
  
    openEditClientDialog(id) {
      this.dialogService.open(EditClientComponent, {
        width: '500px',
        data: {
          'id': id
        }
      })
    }
  
    closeAll() {
      this.addClientDialogRef.afterClosed().subscribe(() =&gt; {
        this.getAllClients();
      });
    }
  
    ngOnInit() {
      this.closeAll();
      this.getAllClients();
    }
  
    getAllClients() {
      this.clientService.getClients().subscribe((res) =&gt; {
        console.log(res);
        this.clients = res;
      }, err =&gt; {
        console.log(err);
      });
    }
  
    deleteClient(id) {
      this.clientService.deleteClient(id)
        .subscribe(res =&gt; {
          this.router.navigate(['./clients']);
          this.ngOnInit();
        }, (err) =&gt; {
          console.log(err);
        });
    }
  
  
  }</code></pre>
  </div>
  </div>
  </p>