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';

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

  constructor(
    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 - https://angular.io/guide/router


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

Codever is open source on Github ⭐🙏

Subscribe to our newsletter for more code resources and news

Adrian Matei (aka adixchen)

Adrian Matei (aka adixchen)
Life force expressing itself as a coding capable human being

Use test.each in jest to avoid repetitive tests

This blog post makes a case for using jest test.each wherever possible, by refactoring an existing test, thus making the code more concise and maintainable and reduce code duplication Continue reading