Using PrimeNG Steps component - can't seem to get it to follow the "routerLink"-CodePudding

I'm quite new to PrimeNG and not the strongest angular operative.

I am trying to set up a "steps" process into my project. The router table is working fine and i can navigate to the pages listed in the "menu" list . . . but not through steps.

I'm getting no alerts within visual studio, the project is running fine. The numbered (and named) steps are visible, but it is not loading in the associated page (ie. "/file").

Thanks in advance.

ts code -

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'app-steps',
  templateUrl: './steps.component.html',
  styleUrls: ['./steps.component.css']
})
export class StepsComponent implements OnInit {


  items: MenuItem[];

  constructor()  {}

  ngOnInit() {
      this.items = [
        {
            label: 'Upload File',
            routerLink: '/file'
        },
          {
              label: 'Date',
              routerLink: '2_date'
          },
          {
              label: 'Further details',
              routerLink: '3_details'
          },
          {
              label: 'Finalise',
              routerLink: '4_id'
          }
      ];

  }


  }

and the HTML

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

<router-outlet></router-outlet>

UPDATE AS REQUESTED

Here are the Routes involved from the routing module.

  //steps
  {
    path: 'file',
    component: ChoseFileComponent,
  },  {
    path: '2_date',
    component: DatepickerComponent,
  },  {
    path: '3_details',
    component: DetailsComponent,
  },  {
    path: '4_id',
    component: IDComponent,
  },
]

The routers are working fine from the menu component in app-component.ts

(small snippet)

        {
                        items:[{
                            label:'Merge record',
                            icon: 'pi pi-user-edit',
                            routerLink:['merge']}]
                    },
                    {
                        items:[{
                            label:'Add to Team',
                            icon: 'pi pi-fw pi-users',
                            routerLink:['team']}]                    },
                ],
            ]
    ```
As you can see i've been messing around with path ID's to try and get the desired behaviour.

CodePudding user response：

I'm not clear about it, You want to navigate by clicking on the steps or what. if you want to navigate by clicking on steps then you have to remove the [readonly]="true" from p-steps

CodePudding user response：

Looking at the route configurations it seems, that the app-steps is an individual component that should have the routes of the components that you want to show on each step as its child routes, as illustrated in the following code snippet.

{
  path: 'steps',
  component: StepsComponent,
  children: [{
      path: '',
      redirectTo: 'file',
      pathMatch: 'full'
    },
    {
      path: 'file',
      component: FileComponent
    },
    {
      path: 'date',
      component: DateComponent
    },
    {
      path: 'details',
      component: DetailsComponent
    },
    {
      path: 'id',
      component: IdComponent
    }
  ],
},

Also, In app-steps component, define the items array of type MenuItem[] as shown below,

this.items = [{
    label: 'Upload File',
    routerLink: 'file' // Remove the '/', prefixing the route definition
  },
  {
    label: 'Date',
    routerLink: 'date'
  },
  {
    label: 'Further details',
    routerLink: 'details'
  },
  {
    label: 'Finalise',
    routerLink: 'id'
  }
];

For your reference, please find a link to a working demo here