DEV Community

Adrian Matei for Codever

Posted on • Originally published at codever.land

How to access path parameters in angular router

At Codever we use Angular extensively, and many time the use navigates to certain routes where dynamically content based on an id for example is loaded. To access these path params in angular navigation you have two possibilities.

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 not included for brevity
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);
      })
    );
  }

}

Enter fullscreen mode Exit fullscreen mode

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;
        });
      }
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

Shared ❤️ from Codever. 👉 use the copy to mine functionality to add it to your personal snippets collection.

Discussion (0)