How can i switch between ng components while using p-steps

UI Components for Angular
Post Reply
Posts: 1
Joined: 07 Jun 2021, 15:59

07 Jun 2021, 16:17


i have some problems using prime steps to switch between 4 components which will be displayed under the stepper depending on the selected step.

On the ng-prime examples page ( ... s/personal) you can see an example that also changes between be diverse components (Personal, Seat, Payment, ...) dependent of the click on the step above.
But in the example code there will only be showed how a message via 'command' in the items list will be switched.

I need some functionality like the following which is running correct but with angular-material:

<mat-horizontal-stepper [linear]="true" #stepper >
<mat-step [stepControl]="personsdataStep.personsdataForm">
<ng-template matStepLabel>Personsdata</ng-template>
<app-step-personsdata #personsdataStep></app-step-personsdata>
<mat-step [stepControl]="documentdataStep.documentdataForm">
<ng-template matStepLabel>Documentdata</ng-template>
<app-step-documentdata #documentdataStep></app-step-documentdata>
<mat-step [stepControl]="anythingStep.anythingForm">
<ng-template matStepLabel>Anything</ng-template>
<app-step-anything #anythingStep></app-step-anything>
<ng-template matStepLabel>Print</ng-template>

There are no routes to the app-step-xxxx components. Click on a single steps displayes the embedded app-step-xxx component.
How can i do the same with p-steps ?
Please help !!! Thank you.

Posts: 130
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA

09 Jun 2021, 19:55

Hey, fellow programmer here:

Source of the documentation is here: ... ents/steps

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests