CODEWITHSUNDEEP
angulartypescript
Devstar34
Devstar34

Reputation: 1097

Angular 6- Activated Route- why am I unable to pull ID from route?

I am having an issue using paramMap to grab the id from the route and store it in a variable. It will just evaluate as null.

this.route.paramMap.subscribe((params: ParamMap) => {
  this.current_id = params.get('SiteHid')
  console.log(this.current_id)
})

^this.current_id logs as null. Where might I be going wrong?

It is trying to pull id from the 'sites/:siteHid' route.

The routes in my routing-module look like:

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' }, // default route
  { path: 'login', component: LoginComponent },
  { path: 'applications', component: ApplicationsComponent, canActivate: [AuthGuard] },
  { path: 'sites/:siteHid', component: SiteComponent, canActivate: [AuthGuard]},
  { path: 'sites', component: SitesComponent, canActivate: [AuthGuard] },
  { path: 'sites-map', component: MapSitesComponent, canActivate: [AuthGuard] },
  { path: 'site-map/:siteHid', component: MapSiteComponent, canActivate: [AuthGuard] },
  { path: 'site-settings/:siteHid', component: MapSiteComponent, canActivate: [AuthGuard] },
  { path: 'devices/:deviceHid', component: DeviceComponent, canActivate: [AuthGuard] },
  { path: 'devices', component: DevicesComponent, canActivate: [AuthGuard] },
  { path: '**', component: PageNotFoundComponent} // should always be the last
];

The entire component looks like:

import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements OnInit {
  is_general_route;
  current_id;
  has_id;

  constructor(private route: ActivatedRoute, private router: Router) { }

 ngOnInit() {
    this.is_general_route = false;
    this.has_id = false;

   function hasNumber(myString) {
      return /\d/.test(myString);
   }
    this.is_general_route = hasNumber(this.router.url)

    this.route.paramMap.subscribe((params: ParamMap) => {
      this.current_id = params.get('SiteHid')
      this.has_id = true;
      console.log(this.current_id)
    })
    //^^ this evaluates the route to see if it contains any numbers/ids. If it does not have any id's, this.is_general_route is false, 
    //meaning the current page does not display the nav tabs that are needed for a singular site. It can display the 'all sites' and 'all sites map' tabs.
    //Otherwise, it's true, and the nav component knows to display 'current site' and 'singular site map' tabs
  }

}

Where might be going wrong on this? Thanks a lot! Let me know if I can clarify anything.

Upvotes: 0

Views: 153

Answers (1)

Ankit Kapoor
Ankit Kapoor

Reputation: 1754

Use this.current_id = params.get('siteHid') instead of SiteHid

Its due to case sensitivity :)

Upvotes: 1

Related Questions