Styjun

I have an component called customers(dialog window),Inside this there are 2 components called list and display, From the list component i will push some object to the table present in the display component like this:

COMPONENTS CODE:

list.component.html

<h3>List</h3>
<form [formGroup]="addListForm">
<mat-form-field>
 <mat-select formControlName="CustomerIds" placeholder="Select Customer" multiple>
 <mat-option *ngFor="let customer of customers" [value]="customer" >
 customer.name
 </mat-option>
 </mat-select>
</mat-form-field>
<br>
<button (click)="onAdd()">Add</button>
</form>

list.component.ts

import Component, OnInit from '@angular/core';
import FormBuilder,FormGroup from '@angular/forms';
import ContactService from '../contacts.service';
import MatOptionSelectionChange from '@angular/material';
import ICustomer from '../models';
import DataService from '../data.service';

@Component(
 selector: 'app-list',
 templateUrl: './list.component.html',
 styleUrls: ['./list.component.css']
)
export class ListComponent implements OnInit 
public customers: ICustomer;
public someCustomer: ICustomer;
public addListForm: FormGroup;

constructor(private fb: FormBuilder,
 private myService: ContactService,
 public dataService: DataService) 

 public async ngOnInit(): Promise<void> 
 this.addListForm = this.fb.group(
 CustomerIds: [null],
 );
 this.customers = await this.myService.getCustomers('');
 
 public async selected(event: MatOptionSelectionChange, customer: ICustomer): Promise<void> 
 this.myService.onCustomerSelect.next(customer);
 

 public onAdd(): void 
 this.someCustomer = this.addListForm.value;
 this.dataService.onSelectCustomer.next(this.someCustomer);
 

display.component.html

<table mat-table [dataSource]="selectedCustomers?.CustomerIds" >
 .....
 </table>

display.component.ts

import Component, OnInit from '@angular/core';
import FormBuilder,FormGroup from '@angular/forms';
import ICustomer from '../models';
import DataService from '../data.service';
@Component(
 selector: 'app-display',
 templateUrl: './display.component.html',
 styleUrls: ['./display.component.css']
)
export class DisplayComponent implements OnInit 
public contacts: ICustomer;
public selectedCustomers: any;
public displayForm: FormGroup;
public addCustomer: any;

public displayedColumns: string[] = ['name', 'email', 'phone', 'button'];

constructor(private fb: FormBuilder,public dataService: DataService) 

 public async ngOnInit(): Promise<void> 
 this.displayForm = this.fb.group(
 );
 this.dataService.onSelectCustomer.subscribe(value => 
 this.selectedCustomers = value;
 );
 

Now, I will push some objects(customers) from list component to display component and i will close dialog window.If i open the dialog window again the table data must be cleared without any any previously pushed data from list component.How can i clear the table cache?

Stackblitz DEMO

In your main file app.component.ts use MatDialog's afterClosed() method which is getting called every time when the Dialog is closed to empty the old data of the table.

public openAdd(): void 
 const dialogRef: MatDialogRef<CustomersComponent> = this.dialog.open(CustomersComponent, 
 width: '80vw', height: '80vh',
 );
 dialogRef.afterClosed().subscribe(result => 
 this.dataService.onSelectCustomer.next([]); 
 );

There is not an issue regarding cache as you think. You are using Service to share the data among the components so the existing pushed value into the next() that values or data is still available to use. You can read more about Services.

So if you want to clear the existing data then there are two ways:

Solution 1:

As stated by FarhatZaman you can subscribe to the dialogRef.afterClosed() method:

dialogRef.afterClosed().subscribe(res => 
 this.dataService.onSelectCustomer.next([]);
 )

Solution 2:

You can clear the data in the method as like:

public onSave(): void 
 this.addCustomer = this.selectedCustomers;
 this.dataService.onSelectCustomer.next([]); // Here

Stackblitz