I have a child dialog and a parent component, My parent component have a MataTable that is updated after I click on update on my Child Dialog.

Here's the code on the parent that is working like a charm:

parentComponent.ts

 openDialog(e: any) {

    this.data = e;
    const dialogRef = this.dialog.open(DialogAddMarqueComponent, {
      data: this.data,
      restoreFocus: false,
    });

    console.log(this.dialogRef)

    dialogRef.afterClosed().subscribe((result) => {
      if (result.length !== 0) {
        this.products.data.push(result);
        this.products = new MatTableDataSource(this.products.data);
      } else { return; }
    });
  }

I added a new function and button that is like the update one but without closing the DialogRef, so I want to achieve what I'm achieving inside the dialogRef.afterClosed() but without closing the button.

Child Component.ts

this.appService.addProduct(this.product)
    .subscribe(
        response => {
            this.product = response;
            this.products.data.unshift(response);
            // this.dialog.close(response); // that will trigger the dialogRef.afterclosed()

        }, error => {
            console.warn('ERROR', error);
        }
    );

I think i need to subscribe to the dialogRef on the parent side and as soon As I click on the Duplicate button it will update the parent. But couldn't find what dialogRef Function to use ( I Tried Get state ) Is there a way to do it ?

CodePudding user response：

The afterClosed event only fires after you close the modal, so you need to figure out another way to do this. For example, you can use a service that you inject in both parent and dialog component and use that to trigger the event.

The service can look like this:

@Injectable({ providedIn: 'root' })
export class MarqueService {
  private updateSource = new Subject<Product>();

  public update$ = this.updateSource.asObservable();

  public updateProduct(product: Product): void {
    this.updateSource.next(product);
  }
}

You then need to inject this service in both parent component and dialog component.

export class ParentComponent implements OnInit, OnDestroy {
  private subscription = new Subscription();

  constructor(private marqueService: MarqueService) {}
   
  ngOnInit() {
    const sub = this.marqueService.update$.subscribe((product) => {
      const products = [...this.products.data];
      const index = products.findIndex(prod => prod.id === product.id);
      products[index] = product;
      this.products.data = products;
    });
    this.subscription.add(sub);
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

The dialog contains the logic to trigger the update when you click the button:

export class DialogAddMarqueComponent {
  constructor(private marqueService: MarqueService) {}
  // ...

  handleUpdateClick() {
    // supposing this.data is the product you are editing
    this.marqueService.updateProduct(this.data);
  }
}

CodePudding user response：

Dialog doesn't support change detection.

So I suggest you to achieve that this way:

1. Create a service. (ng g s <service-name>)
2. Put your variables in that service so you can reference them in both pages.

Now if you change the data in dialog it will change in parent page.