'primeNG Angular - Page auto reload after dynamic dialog closes

I was building a form component that is created by a button click on my page, which creates inside a dynamic dialog.

After the form is submitted, the form is updated to the server, but the page immediately reloads after adding a '?' at the end of the URL and I would like to stop it from happening.

I have tried removing the onClose subscription of the parent component and the same result happens, and the onClose related code is executed before reloading. Since the subscription is executed before reloading, I have no control of the settings of the component anymore.

The angular stack

  • primeng: ^13.1.0
  • @angular/...: ~13.1.0 except @angular/cdk: ^13.2.1

parent.component.html

<button
  type="button"
  pButton
  icon="pi pi-plus"
  class="p-button-success mx-1"
  label="New"
  (click)="onAddNewEntry()"
></button>

parent.component.ts

import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
import { ChildComponent } from './child-component';

@Component({
...
  providers: [DialogService]
})
export class ParentComponent implements OnInit, OnDestroy {
  constructor(
    private dialogService: DialogService
  ) {}

  ref: DynamicDialogRef = new DynamicDialogRef();

  ngOnInit(): void {
  }

  onAddNewEntry(): void {
    this.ref = this.dialogService.open(ChildComponent, {});
    this.ref.onClose.subscript(() => console.log('Hi'))
  }

  ngOnDestroy(): void {
    if (this.ref) {
      this.ref.close();
    }
  }
}

child.component.ts

import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
@Component({
  ...
})
export class ChildComponent implements OnInit {
  constructor(
    private messageService: MessageService,
    private ref: DynamicDialogRef,
    private config: DynamicDialogConfig
  ) {}

  newEntryForm: FormGroup = new FormGroup({});

  ngOnInit(): void {
    this.newDeliverForm = new FormGroup({
      ...
    });
  }

  onSubmitNew() {
    //Handling
    this.ref.close(newDeliver);
  }
}

app-routing.module.ts

const routes: Routes = [
  {
    path: 'config',
    children: [
      { path: 'parent', component: ParentComponent },
    ],
  },
];


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source