Angular Activatedroute Params Always empty

Question

I'm trying to build a mailing functionality in my app using angular, the problem is that I want to get parameters from the url to filter the mails. (example : inbox / sent / spam / trash ... etc)

Here are my Routes :

export const AppRoutes: Routes= [
  { path : '' , component : MainComponent },
  { path : 'main/:id', component : MainComponent},
]

Constructor of my MainComponent :

constructor(
      private _mailService : MailService,
      private _authService : AuthService, 
      private dialog: MatDialog,
      private activatedRoute : ActivatedRoute
    ) { 
      console.log("main mailing component ctor");
      this.activatedRoute.params.subscribe((data)=> console.log(data));
    }

The Problem is that console.log(data) is always giving me an empty object.

I've tried it with another component and it's working very fine.

I don't know what I'm doing wrong here.

Here is my folder / component structure :

Dashboard
   /Mailing
      /Main
      /SideBar
      Mailing.module.ts
      Mailing.component.ts
      Mailing.routing.ts
      Mailing.component.scss

Here is the url I'm trying to access : http://localhost:4200/dashboard/main/1234

Answer 1

from the documentation

Two older properties are still available. They are less capable than their replacements, discouraged, and may be deprecated in a future Angular version. params — An Observable that contains the required and optional parameters specific to the route. Use paramMap instead.

i resolved using paramMap. https://angular.io/api/router/ParamMap