Modify the parent component using dialogRef while keeping the dialog open

Question

Modify the parent component using dialogRef while keeping the dialog open

Within my application, there is a child dialog connected to a parent component. The parent component contains a MatTable that gets updated when the "update" button in the child dialog is clicked.

The following code in the parent component is functioning perfectly:

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 have implemented a new function and button similar to the update functionality but without closing the DialogRef. I aim to replicate the behavior within dialogRef.afterClosed() without actually closing the dialog.

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 believe I need to subscribe to the dialogRef on the parent side so that clicking the duplicate button triggers an update in the parent component. However, I am unsure of which dialogRef function to utilize (I attempted Get state). Is there a method to accomplish this?

angular typescript angular-material angular-cli

Answer 1

Answer №1

Dialog cannot detect changes automatically.

To address this issue, I recommend following these steps:

Start by creating a service. (Use command: ng g s <service-name>)
Store your variables in the created service so that you can access them from both pages.

With this setup, any changes made in the dialog will be reflected on the parent page as well.

Answer 2

Dialog cannot detect changes automatically.

To address this issue, I recommend following these steps:

Start by creating a service. (Use command: ng g s <service-name>)
Store your variables in the created service so that you can access them from both pages.

With this setup, any changes made in the dialog will be reflected on the parent page as well.

Answer 3

Answer №2

Once the modal is closed, the afterClosed event will be triggered. In order to achieve a similar functionality, you'll need to explore alternative methods. One approach could involve utilizing a shared service that is injected into both the parent and dialog components to facilitate event triggering.

A potential implementation for the service might resemble the following:

@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);
  }
}

Subsequently, it is necessary to inject this service into both the parent and dialog components.

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 component contains the logic to trigger the update upon button click:

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

  handleUpdateClick() {
    // Assuming this.data represents the product being edited
    this.marqueService.updateProduct(this.data);
  }
}

Answer 4

Once the modal is closed, the afterClosed event will be triggered. In order to achieve a similar functionality, you'll need to explore alternative methods. One approach could involve utilizing a shared service that is injected into both the parent and dialog components to facilitate event triggering.

A potential implementation for the service might resemble the following:

@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);
  }
}

Subsequently, it is necessary to inject this service into both the parent and dialog components.

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 component contains the logic to trigger the update upon button click:

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

  handleUpdateClick() {
    // Assuming this.data represents the product being edited
    this.marqueService.updateProduct(this.data);
  }
}

Modify the parent component using dialogRef while keeping the dialog open

Answer №1

Answer №2

Similar questions

Discovering the process of reaching service members through an HTML View

The push action in NavController is not displaying Google Maps as expected

The API's post call is throwing an error, yet it functions perfectly when tested on

Can we make one tab disappear when another tab is clicked in Ionic 2 app menu icon?

Compilation error occurs while compiling the Angular Tree component indicating that there is no "Cancelable" exported member

Efficient way to assign multiple values simultaneously in react hook form with Typescript

Troubleshooting why Angular2 is failing to load external styles in styleUrls

In TypeScript, there is a chance that the object may be undefined, so I make use of an if

Encountering the error "Object potentially undefined" while attempting to activate Cloud Function during document creation

Choosing a nested for loop structure in TypeScript

Input the variant number TypeScript as the key value pair

What could be the root of this next.js build issue occurring on the Vercel platform?

The negation operator in Typescript is failing to negate as expected

Guide on displaying console.log in mobile simulator while using Angular2

Is it possible for TypeScript to convert objects while preserving type annotations?

Refreshing a page with a 404 error in Angular 2 while in production mode and without the useHash configuration

What steps should I take to resolve this unexpected issue with svelte?

The Angular app.component.html is failing to display the newly added component

Encountering a problem with Webpack SASS build where all files compile successfully, only to be followed by a JavaScript

The properties required for type 'Subscription' are not present