PrimeNG Component Containing a Dynamic Dialog Instance

I am experiencing an issue with handling dynamic dialogs in PrimeNG.

Is there a solution for managing actions on a dialog other than just using the close option?

For instance, in the context of the Kendo-UI dialog example, I can specify the content.instance of the component and access fields within the component instance that is opened as a dialog.

  const ref = this.dialogService.open(ResourceComponent, {
        data: {
            logicFormGroup: this.formGroup,
            resources: this.resources$
        }, width: '700px'
    });

    ref.onClose.subscribe((result: ResourceModel) => {
        console.log(result);
    });

   ref.addPersonEmitter.sub(....)

   in component ResourceComponent
   @Output() addPersonEmitter = new EventEmitter();
angulartypescriptkendo-uiprimeng

Answer №1

My approach involved passing an EventEmitter to the dialog data and then subscribing to that reference.

Here is how it was implemented:

    oneventFire : EventEmitter<number> = new EventEmitter<number>();
this.dialogService.open(MyPopupComponent,
      {data: {  oneventFire : this.oneventFire },

And here is how it was consumed in the child component:

 if (this.config && this.config.data) { 
      this.oneventFire = this.config.data.oneventFire ;
    }

This setup allowed for subscription in the parent component and emitting events in the children components.

Answer №2

Facing a similar issue, I managed to resolve it in the following manner:

const reference = this.dialogService.open(ComponentType, {});
let dialogReference = this.dialogService.dialogComponentRefMap.get(reference);
dialogReference.changeDetectorRef.detectChanges();
const instance = dialogReference.instance.componentRef.instance as ComponentType;
instance.someOutput.subscribe(() =>{ doSomething(); });

The use of detectChanges is crucial to prompt the dynamic loading of the component within the dialog. Without it, the componentRef on the instance would remain undefined as the component loads only during the ngAfterViewInit of the dialog.

Remember to unsubscribe on ngOnDestroy...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve information from two distinct observables from within the resolver function

I'm facing an issue with my services that work on the observable principle. I am trying to fetch the results of 2 services inside a resolver to display on my page. However, the data being displayed on the page is just an empty data object. I even trie ...

angular

I am experiencing difficulties with implementing Angular material components in my project

I recently encountered an issue while trying to integrate angular material into my project. Despite importing the MatFormFieldModule, I received the following error: ERROR in src/app/login/components/login/login.component.html:2:1 - error NG8001: &apo ...

angulartypescript

Tips for Using Typescript Instance Fields to Prevent Undefined Values

After creating a few Typescript classes, I encountered an issue where I would get an undefined error when trying to use them after instantiating. I experimented with initializing my fields in the constructor, which resolved the problem, but I don't t ...

typescriptconstructorundefined

Is it feasible to verify the accuracy of the return type of a generic function in Typescript?

Is there a way to validate the result of JSON.parse for different possible types? In the APIs I'm working on, various Json fields from the database need to have specific structures. I want to check if a certain JsonValue returned from the database is ...

jsontypescriptvalidationprismatypechecking

Issue with sorting functionality in swimlane/ngx-datatable not functioning properly

Currently working with ngx-datatable version 11.2.0 and facing an issue related to client-side sorting on a column where the value is determined by an evaluated expression. The column contains numerical values representing latitude and longitude, but we ...

angularngx-datatable

Angular ReactiveForms not receiving real-time updates on dynamic values

I'm using reactive forms in Angular and I have a FormArray that retrieves all the values except for product_total. <tbody formArrayName="products"> <tr *ngFor="let phone of productForms.controls; let i=index" [formGroupName]="i"> ...

angulartypescriptangular-reactive-formsformarray

Implement CSS to globally style material.angular's mat-card by customizing the background color

Looking for a way to globally change the background of mat-card on material.angular.io. I attempted adding the following code snippet to styles.css with no success. mat-card { background-color: purple; } ...

cssangularangular-material

Trouble with Angular toggle switch in replicated form groups

Currently, I have a form group that contains multiple form controls, including a toggle switch. This switch is responsible for toggling a boolean value in the model between true and false. Depending on this value, an *ngIf statement determines whether cert ...

javascriptangulartypescript

How to make a Kendo Grid Combobox template or editor automatically set focus and select all text

I've been experimenting with using the combobox as either an editor or template for a column. The key difference is that one (the template) is always visible, while the other (the editor) is only displayed when the user edits a cell in the column. I&a ...

jquerykendo-uikendo-grid

Having an issue in Angular 2 where the correct function is not triggered when a button is placed within a selectable anchor

Within an anchor element, I have a button that triggers its own click listener for an editing popup module. The anchor itself has another click listener assigned to it. For example: <a (click)="onClick(myId)" class="list-group-item clearfix"> < ...

javascripthtmlangulartypescript

Execute an Asynchronous Operation in NgRx After Triggering an Action

Please note that this is a question seeking clarification Instructions Needed I am currently working on dispatching an action to NgRx in order to add a task to a list of tasks. Additionally, I need to perform a put request to an API to save the changes ma ...

angulartypescriptngrx

Error encountered in Typescript when attempting to invoke axios - the call lacks a suitable overload

When I make a call to axios, I include a config object like this: const req = { method, url, timeout: 300000, headers: { 'Content-Type': 'application/json' } } axios(req) An error in TypeScript is thrown stating that "No overload matc ...

javascripttypescriptaxios

Refreshingly modernizing SVG in Angular

I've been facing a challenge in my Angular application where I am trying to dynamically add paths to an SVG element within an HTML file. The issue is that even though the paths are getting added to the DOM, they are not showing up in the browser when ...

javascriptangulartypescriptdomsvg

The function jquery__WEBPACK_IMPORTED_MODULE_4__.hubConnection is not recognized

I am currently trying to integrate singlar (not ASP.Core) with angular 8. If I directly include signalr and jQuery in index.html as follows: <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWS ...

jqueryangularsignalrangular8

Incorporate a fresh element into an object after its initial creation

Hello, I am looking to create an object in JavaScript that includes an array-object field called "Cities." Within each city entry, there should be information such as the city's name, ID, key, and a District array object containing town data for that ...

javascriptarraysreactjstypescriptobject

What is the best way to deploy a docker image from my computer to the office server?

I have an Angular project that has been Dockerized on my personal computer. I am now looking to deploy it on my company's server without having superuser permissions. What steps should I take to achieve this? ...

angulardockerdocker-composedevopsremote-server

Modify the name of the document

I have a piece of code that retrieves a file from the clipboard and I need to change its name if it is named image.png. Below is the code snippet where I attempt to achieve this: @HostListener('paste', ['$event']) onPaste(e: ClipboardE ...

javascriptangulartypescript

The object parameter is not being bound properly in the integration of Spring Boot and Angular

I am attempting to make an HTTP POST request to an API created in Spring Boot from an Angular app. The API expects an object as a parameter. When I execute the URL with Postman using form-data or urlencoded parameters, the request finishes successfully. Ho ...

angularspring-bootbinding

Stop fullscreen mode in Angular after initiating in fullscreen mode

Issue with exiting full screen on Angular when starting Chrome in full-screen mode. HTML: <hello name="{{ name }}"></hello> <a href="https://angular-go-full-screen-f11-key.stackblitz.io" target="_blank" style=& ...

javascriptangulartypescriptgoogle-chrome

"What is the best way to access and extract data from a nested json file on an

I've been struggling with this issue for weeks, scouring the Internet for a solution without success. How can I extract and display the year name and course name from my .json file? Do I need to link career.id and year.id to display career year cours ...

javascripthtmlangulartypescriptionic-framework