PrimeNG Steps component is not working in Angular 13 project

Issue

I have created a project in the Angular 13 version. I have installed PrimeNG controls (13.3.0 version) . Now I want to use the Steps control but it's not working. In my Account Module I have created a folder and inside the folder, I have the below components:

1. signup
2. organization
3. user

Now I have added the PrimeNG Steps control in the signup component to load the organization and user component inside it. Here is the signup component's code:

HTML:

<div class="mx-auto bg-normal" style="width:500px; margin-top:45px; margin-bottom:40px; text-align:center;">
    <h3>Register organization</h3>    
</div>

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

TS

ngOnInit(): void {
    this.items = [
      {
        label: 'Organization1',
        routerLink: 'organization'
      },
      {
        label: 'Account',
        routerLink: 'user-reg'
      }
    ];
  }

In my accounting-routing.module.ts file I have the below code:

const routes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: 'lockscreen', component: LockscreenComponent },
    {
        path: 'steps', component: SignupComponent,
        children: [
            { path: '', redirectTo: 'organization', pathMatch: 'full' },
            { path: 'organization', component: OrganizationComponent },
            { path: 'user-reg', component: UserComponent },
        ]
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class AccountRoutingModule { }

But the problem is organization or user component is not loading inside the Steps.

I have added Steps Module in my Account.module file also. I don't find any error in the browser console either. Can anyone give me any suggestions to solve the problem?

Solution

Here is my answer. I forgot to add the router directive just after the steps component. Here is the final code of signup HTML:

<div class="mx-auto bg-normal" style="width:500px; margin-top:45px; margin-bottom:40px; text-align:center;">
    <h3>Register organization</h3>    
</div>

<p-steps [model]="items" [readonly]="false"></p-steps>
<br/>

<router-outlet></router-outlet>

Answered By - mnu-nasir