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
    });
  }

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);
      });
    }
  }

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.