PrimeNG Steps inside Dynamic Dialog

Question

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.

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?

Answer 1

You don't need to use DynamicDialog by the dynamicDialog use component base to render the dialog content wasn't match with the Steps does.

I recommended you to just use Dialog. (Doc)

Then you can display content from child route as the same as PrimeNg Steps does. (More about child route)

step.module.ts

const routes: Routes = [{
  path: '', component: StepLandingComponent, children: [
    {path: '', redirectTo: 'personal', pathMatch: 'full'},
    {path: 'personal', component: PersonalDemo},
    {path: 'confirmation', component: ConfirmationDemo},
    {path: 'seat', component: SeatDemo},
    {path: 'payment', component: PaymentDemo}
  ]
}];

@NgModule({
  declarations: [StepLandingComponent],
  imports: [
    ...
    StepsModule,
    RouterModule.forChild(routes)
  ],
  providers: [
    TicketService
  ],
  exports: [RouterModule]
})
export class StepModule {
}

step-landing.component.ts

export class StepLandingComponent {

  display: boolean;
  items: MenuItem[] = [
    {label: 'Personal', routerLink: 'personal'},
    {label: 'Seat', routerLink: 'seat'},
    {label: 'Payment', routerLink: 'payment'},
    {label: 'Confirmation', routerLink: 'confirmation'}
  ];

  constructor() { }

  show(): void {
    this.display = true;
  }
}

step-landing.component.html

<button type="button" (click)="show()" pButton icon="pi pi-info-circle" label="Show"></button>
<p-dialog position="top" [(visible)]="display">
  <div class="card">
    <p-steps [model]="items" [readonly]="false"></p-steps>
    <router-outlet></router-outlet>
  </div>
</p-dialog>