PrimeNG Steps inside Dynamic Dialog

  angular, angular-routing, primeng

I create a step component like on primeNG page and I’d like to put him inside a dynamic dialog but after applying it the "Step 1" and "Step 2" are not rendered.

Stepper Inside Dialog

Looking at the code I see that the key part is the way we open the dialog. From PrimeNG sample we’ve

show() {
    const ref = this.dialogService.open(CarsListDemo, {
        header: 'Choose a Car',
        width: '70%'
    });
}

This render directly the component (or… how this passes on routing?) and for steps we need to define the routerLink to define the steps navigation.

 this.items = [{
                label: 'Personal',
                routerLink: 'personal'
            },
           {//more steps}

The routing

@NgModule({
    imports: [
        RouterModule.forChild([
            {path:'',component: StepsDemo, children:[
                {path:'', redirectTo: 'personal', pathMatch: 'full'},
                {path: 'personal', component: PersonalDemo},
                {path: 'confirmation', component: ConfirmationDemo},
                {path: 'seat', component: SeatDemo},
                {path: 'payment', component: PaymentDemo}
            ]}
        ])
    ],
    exports: [
        RouterModule
    ]
})

As resume, I’m facing some issues on define the Steps inside the dialog.
When we do

this.dialogService.open(CarsListDemo…

which route do we call?
Or how can I define a route on open method?

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.