Access path parameters in angular navigation

You have two possibilities to access the path params in angular navigation. The first one, asynchronous, is to subscribe to the Observable<ParamMap> observable, which you can access via paramMap method of the ActivatedRoute. Then use the get method with parameter you want to get as argument, as in the example below in the ngOnInit method:

// other imports ignored for breviyty
import { ActivatedRoute } from '@angular/router';
import { switchMap } from 'rxjs/operators';

  selector: 'app-public-snippet-details',
  templateUrl: './public-snippet-details.component.html'
export class PublicSnippetDetailsComponent implements OnInit {
  snippetId: string;
  snippet$: Observable<Codelet>;

    private publicSnippetsService: PublicSnippetsService,
    private userInfoStore: UserInfoStore,
    private route: ActivatedRoute) {

  ngOnInit() {
    this.snippet$ = this.route.paramMap.pipe(
      switchMap(params => {
        this.snippetId = params.get('id');
        return this.publicSnippetsService.getPublicSnippetById(this.snippetId);


The second one, synchronous, is to the snapshot of this route (ActivatedRoute), and directly access the parameter from the paramMap, const bookmarkId = this.route.snapshot.paramMap.get('id');

export class BookmarkDetailsComponent implements OnInit {
  // constructor and other details ignored for brevity

  ngOnInit() {
    this.popup = this.route.snapshot.queryParamMap.get('popup');
    this.userInfoStore.getUserInfo$().subscribe(userInfo => {
      this.userData$ = this.userDataStore.getUserData$();
      this.bookmark = window.history.state.bookmark;
      if (!window.history.state.bookmark) {
        const bookmarkId = this.route.snapshot.paramMap.get('id');
        this.personalBookmarksService.getPersonalBookmarkById(userInfo.sub, bookmarkId).subscribe((response) => {
          this.bookmark = response;

Reference -

Shared with from 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Subscribe to our newsletter for more code resources and news

Adrian Matei

Adrian Matei
Life force expressing itself as a coding capable human being