DEV Community

loading...
Cover image for How to use browser history to pass data in Angular navigation
Codever

How to use browser history to pass data in Angular navigation

Adrian Matei
Making bookmarking easier for devs with www.codever.land
・1 min read

Project: bookmarks.dev - File: snippet-form.base.component.ts

In the router.navigate method place the object /data in the state field of the navigation extras parameter

//  constructor( protected router: Router) {}

  navigateToSnippetDetails(snippet: Codelet, queryParams: Params): void {
    const link = [`./my-snippets/${snippet._id}/details`];
    this.router.navigate(link, {
      state: {snippet: snippet},
      queryParams: queryParams
    });
  }
Enter fullscreen mode Exit fullscreen mode

To receive on the the other end of the line, just look for it in window.history.state

  ngOnInit(): void {
    this.popup = this.route.snapshot.queryParamMap.get('popup');
    this.snippet$ = of(window.history.state.snippet);
    if (!window.history.state.snippet) {
      this.userInfoStore.getUserInfo$().subscribe(userInfo => {
        this.userId = userInfo.sub;
        this.codeletId = this.route.snapshot.paramMap.get('id');
        this.snippet$ = this.personalCodeletsService.getPersonalCodeletById(this.userId, this.codeletId);
      });
    }
  }
Enter fullscreen mode Exit fullscreen mode


Reference -
https://angular.io/api/router/NavigationExtras


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

Discussion (0)