Angular 17: Lazy load standalone component with parameter?

Question

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

Answer 1

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

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

Answer 2

You can try params.get('folder')

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

The access method you have used can be done but we need to listen for the params property instead of paramMap

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