Search code examples
angularangular-routerlinkangular-standalone-components

Angular 17: Lazy load standalone component with parameter?


this is my html:

<a class="dropdown-item" [routerLink]="['/videos', p.param]">{{ p.title }}</a>

this is the code in app.route.ts:

{
    path: 'videos/:folder',
    loadComponent: () => import('./pages/application/video/video.component')
      .then(mod => mod.VideoComponent)
  },

and this is the code in the VideoComponent (is a standalone component which I try to get value folder:

ngOnInit(): void {
    this.route.paramMap
      .subscribe(
        (params: any) => {
          console.log("value params folder:" + params);
          this.folder = params.folder; <--- no value.
        }
      )
  
  }

and params.folder has no value. I google it but I haven't seen any thing.
Is stand alone component support this feature or is there a way to get pass a parameter thru a stand alone component? Is there any link/example how to do it?

Thank you


Solution

  • Simply, to get detail from activated route you can use snapshot.paramMap as below.

    ngOnInit(): void {
        this.folder = this.route.snapshot.paramMap.get('folder');
    }