CODEWITHSUNDEEP
javascriptangulartypescriptangular2-routing
rostamiani
rostamiani

Reputation: 3265

paramMap item always returns null using Angular 8 routing

I'm using Angular 8 to get some params or data from the route but it's always empty. My component is inside a lazyloaded module named 'message'.

app-routing.module.ts:

...

{
  path: 'message',
  loadChildren: () =>
    import('./systems/message/message.module').then(
      m => m.MessageModule
    )
},

...

message-routing.module.ts:

...

const routes: Routes = [
  {
    path: '',
    component: MessageIndexComponent,
    children: [{ path: ':folder', component: ComponentMessageListComponent }]
  },
  { path: 'add', component: MessageAddComponent },
  { path: 'list', component: MessageIndexComponent }
];

...

component-message-list.component.ts:

...

constructor(
  private route: ActivatedRoute
) {}

ngOnInit() {
  console.log(this.route.snapshot.paramMap.get('folder'));
   // Change list on date change
  this.route.paramMap.subscribe(params => {
    console.log(params.get('folder'));
  });
}

...

Both consoles are returning NULL when routing to this address:

/message/inbox

UPDATE:

I'm navigating to the route by writing the address directly to the browser:

http://127.0.0.1:4200/message/inbox

or by an anchor tag

message-index.component.html

...

  <a class="list-group-item list-group-item-action d-flex p-3" routerLink="inbox" routerLinkActive="active">
    Inbox
  </a>
...

And always the param is null

Upvotes: 0

Views: 4843

Answers (2)

Temo Kiknadze
Temo Kiknadze

Reputation: 367

you can try this:

this.router.parseUrl(this.router.url).queryParams[key]

Upvotes: 0

rostamiani
rostamiani

Reputation: 3265

I had to get the firstChild params not the parent. The previews code was returning the params of the parent.

This code works:

this.route.firstChild.paramMap.subscribe(params => {
    console.log(params.get('folder'));
  });

UPDATE: The problem was that I forgot to replace the child component tag in the parent with 'router-outlet' then the child component was inserting in the parent without router!

Thanks everyone

Upvotes: 0

Related Questions