Using steps component with auxiliary router

[rory-magee]

I'm using angular routing with a router-outlet in my main app.component.html. Within another component I want to use the 'steps' component so I have another auxiliary router-outlet named campaignoutlet in that component

<div class="card">
    <p-steps [model]="items" [readonly]="false"></p-steps>
</div>

<router-outlet name="campaignoutlet"></router-outlet>

And my MenuItems for the above component are as follows:

ngOnInit(): void {
    this.items = [
        {
            label: 'Campaign',
            routerLink: 'campaign-setup/create-campaign'
        },
        {
            label: 'Offers',
            routerLink: 'campaign-setup/create-offers'
        },
        {
            label: 'Collateral',
            routerLink: 'campaign-setup/create-collateral'
        },
        {
            label: 'Overview',
            routerLink: 'campaign-setup/campaign-overview'
        }
    ];
}

And in my routing module I have the following routes defined with the bottom four routes having the outlet: 'campaignoutlet' attribute which based on angular documentation should load those components in the auxiliary router outlet defined above.

const routes: Routes = [
    {
        path: 'campaigns-dashboard',
        component: CampaignDashboardComponent
    },
    {
        path: 'campaign-setup',
        component: CampaignSetupComponent
    },
    {
        path: 'campaign-setup/create-campaign',
        component: CampaignComponent,
        outlet: 'campaignoutlet'
    },
    {
        path: 'campaign-setup/create-collateral',
        component: CollateralComponent,
        outlet: 'campaignoutlet'
    },
    {
        path: 'campaign-setup/create-offers',
        component: OffersComponent,
        outlet: 'campaignoutlet'
    },
    {
        path: 'campaign-setup/campaign-overview',
        component: OverviewComponent,
        outlet: 'campaignoutlet'
    }
];

Clicking each of the steps in the steps component does not update the auxiliary router outlet (or even the main router outlet). Is there something additional I need to do to tell the steps component which outlet I want to use?

[cetincakiroglu]

Hi,

Could you please share a stackblitz example by forking this demo so we can identify the issue precisely https://stackblitz.com/edit/petyx4?file=src%2Fapp%2Fdemo%2Fsteps-routing-demo.ts