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

Description: TypeScript type that derives from the third constructor parameter of a generic function

How can I determine the type of constructor props for a generic type? Take a look at this example. type PatchableProps<T> = T extends { [k: string | number]: any } ? { [Key in keyof T]: PatchableProps<T[Key]> } : T | Patch export class ...

typescriptgenerics

Using custom properties from the Material-UI theme object with custom props in Emotion styled components: a step-by-step guide

I have implemented a custom object called fTokens into the MUI theme using Module augmentation in TypeScript This is how my theme.d.ts file is structured declare module "@mui/material/styles" { interface FPalette { ... } interface FTokens ...

reactjstypescriptmaterial-uiemotion

Combining Repetitive Elements in an Array

Trying to combine an array of products with the same order_id while also including all objects from a second products array. Below are some sample orders: const orders = [ { "order_details": { }, "order_id": "1", ...

javascriptnode.jsreactjstypescriptecmascript-6

Issue with form using "target=_blank" to open PDF in web application home screen not functioning properly

I am encountering an issue in my Angular application where a form with target="_blank" successfully returns a PDF upon submission, but when accessed from the homescreen icon of the web-app in Android/Chrome, the new window opens blank without displaying th ...

angulargoogle-chromeprogressive-web-apps

After incorporating lazy loading modules in Angular 8, the main component is rendered twice within the Router outlet

Shown below is the expected User Interface: https://i.sstatic.net/YYKDX.png However, the current UI being displayed is different: https://i.sstatic.net/ipBtS.png This is the content of the app-routing.module.ts file: const routes: Routes=[ {path: &apos ...

angularcomponentsangular-routingrouter-outlet

What is the best way to emphasize when the path matches exactly with '/'?

Is there a way to highlight the path only when it exactly matches '/'? Currently, even on 'Page 2', the 'Home' link is still highlighted. Check out the plunker here .active { color: red; } <a routerLinkActive="active" r ...

angulartypescriptangular2-routing

Unlock the full potential of Angular lazy loaded modules by gaining access to root services

Exploring the world of Angular lazy loaded modules, I have a question about accessing a root service called AuthService within lazy loaded modules. My goal is to tap into the singleton instance present in the root injector while working with these modules. ...

angulardependency-injection

Tips for Ensuring the Observable Completes Before Subscribing

I utilized RXJS operators in my code to retrieve an array of locations. Here is the code snippet: return O$ = this.db.list(`UserPlaces/${this.authData.auth.auth.currentUser.uid}`, { query: { orderByChild: 'deleted', equalTo: fal ...

typescriptfirebaseionic2rxjsobservable

The error message indicates that the property 'current' is not found in the type '[boolean, Dispatch<SetStateAction<boolean>>]'

During my React/Typescript project, I encountered an issue involving cursor animations. While researching the topic, I stumbled upon a CodePen (Animated Cursor React Component) that functioned perfectly. However, when attempting to convert it into a Types ...

javascriptreactjstypescript

What is the best way to disable a submit button based on form validity in Angular 4 with ng-content?

Include a form component that consists of an email field, password field, and submit button passed through ng-content. This allows the login form to display a 'Login' button and the register form to display a 'Register' button. Here is ...

formsangularangular2-ngcontent

Using HTTP POST to subscribe and implementing a try-catch block

When using Angular2's http.post, I encountered an issue where the headers were not sent to the CORS server. To address this, I attempted to create a loop that would retry the request until it succeeds. However, this resulted in an endless loop. How ca ...

javascripthttptypescriptangular

Unable to reach the exposed port of the container

I am having difficulty accessing an Angular application that I have deployed within a container. Despite exposing the port in my Dockerfile and mapping the port in the docker-compose file, I still cannot access it from my web browser (Mozilla). There are ...

angulardockerdocker-compose

What is the best way to display just one record that has the lowest score out of all the records?

I need help with displaying only 1 record from the DL list that has the lowest score, instead of showing all records. In the example on stackblitz, you can see that for the first record, the DL scores are: 54, 20, and updated. Instead of displaying all 3 ...

javascriptarraysangulartypescriptfilter

Efficiently convert Map keys into a Set in Javascript without the need to copy and rebuild the set

Even though I am capable of const set = new Set(map.keys()) I don't want to have to rebuild the set. Additionally, I prefer not to create a duplicate set for the return value. The function responsible for returning this set should also have the abili ...

javascripttypescript

Multiple subscriptions without having to recalculate the shared components

const ex = ajax.getJSON('https://httpbin.org/get?a=24'); ex.pipe(pluck('args')).subscribe(x => console.log('Arguments: ', x)); ex.pipe(pluck('headers')).subscribe(x => console.log('Response Headers: ' ...

ajaxangularrxjs

encountering a loading issue with angular2-modal in rc1 version

Currently, I am implementing a library called angular2-modal. This library offers various modal options including bootstrap and vex for angular 2. While vex is functioning properly, I encounter an error when switching to bootstrap: responsive-applicati ...

javascripttypescriptangularangular2-directives

FInding the inner value of a Vuetify chip

I have a Vue application that utilizes Vuetify chips to display information. I'm trying to log the value inside a specific chip when it is clicked, but I keep getting an undefined error when trying to access the array where the information comes from. ...

javascripttypescriptvue.jsvuetify.js

What could be causing the empty object return from the Async function in my Typescript code on Next JS?

Encountering issues with an async function. In the ../lib folder, I have a class for handling data from an API website. However, when attempting to load the API data within an async function, I encounter difficulties. The async function does not return a ...

javascripttypescriptapinext.js

What could be the reason behind the material table not populating with data from the source, despite the service returning an array?

Currently, I am utilizing a mean stack in order to craft a bug tracking system. The issue arises when my express.js service returns an array of issues, which I assign to another array that functions as the dataSource for mat-table. However, despite the ar ...

angulartypescriptexpressangular-materialangular6

Error in Firebase Emulator: The refFromUrl() function requires a complete and valid URL to run properly

Could it be that refFromURL() is not functioning properly when used locally? function deleteImage(imageUrl: string) { let urlRef = firebase.storage().refFromURL(imageUrl) return urlRef.delete().catch((error) => console.error(error)) } Upon ...

typescriptfirebase-storagefirebase-tools