DEV Community

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

How to use browser history to pass data in Angular navigation

ama profile image Adrian Matei ・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)

pic
Editor guide