DEV Community

Cover image for How to use browser history to pass data in Angular navigation
Codever profile image Adrian Matei
Adrian Matei for Codever

Posted on • Edited on • Originally published at codever.dev

How to use browser history to pass data in Angular navigation

#angular #typescript #snippet

Project: Codever - 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 Codever. Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Top comments (0)