How do i pass heavy json data object on navigation in angular 12?

Question

I am working on an Angular 12 project where I want to pass a heavy json data from one screen to another after navigation.

Sample code is as below:

Component 1

import { DOCUMENT, Location } from '@angular/common';
import { Component, ElementRef, HostListener, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { Store } from '@ngrx/store';

@Component({
  selector: 'app-form-template',
  templateUrl: './form-templates.component.html',
})
export class FormTemplatesComponent {


  public templatesTypeIndex = 0;
  private customFormData = [
    {
        "id": "0001",
        "type": "donut",
        "name": "Cake",
        "ppu": 0.55,
        "batters":
            {
                "batter":
                    [
                        { "id": "1001", "type": "Regular" },
                        { "id": "1002", "type": "Chocolate" },
                        { "id": "1003", "type": "Blueberry" },
                        { "id": "1004", "type": "Devil's Food" }
                    ]
            },
        "topping":
            [
                { "id": "5001", "type": "None" },
                { "id": "5002", "type": "Glazed" },
                { "id": "5005", "type": "Sugar" },
                { "id": "5007", "type": "Powdered Sugar" },
                { "id": "5006", "type": "Chocolate with Sprinkles" },
                { "id": "5003", "type": "Chocolate" },
                { "id": "5004", "type": "Maple" }
            ]
    },
    {
        "id": "0002",
        "type": "donut",
        "name": "Raised",
        "ppu": 0.55,
        "batters":
            {
                "batter":
                    [
                        { "id": "1001", "type": "Regular" }
                    ]
            },
        "topping":
            [
                { "id": "5001", "type": "None" },
                { "id": "5002", "type": "Glazed" },
                { "id": "5005", "type": "Sugar" },
                { "id": "5003", "type": "Chocolate" },
                { "id": "5004", "type": "Maple" }
            ]
    },
    {
        "id": "0003",
        "type": "donut",
        "name": "Old Fashioned",
        "ppu": 0.55,
        "batters":
            {
                "batter":
                    [
                        { "id": "1001", "type": "Regular" },
                        { "id": "1002", "type": "Chocolate" }
                    ]
            },
        "topping":
            [
                { "id": "5001", "type": "None" },
                { "id": "5002", "type": "Glazed" },
                { "id": "5003", "type": "Chocolate" },
                { "id": "5004", "type": "Maple" }
            ]
    }
];

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private location: Location,
    private templatesService: SampleTemplatesService,
    private store: Store<RootReducer.State>,
  ) {}


  public editFormTemplate(id): void {
    this.router.navigate([`sampleApp/customForm/${id}`]);
  }

  public navigateToTemplate(): void {
    this.router.navigate(['sampleApp/customForm']);
  }

}

Component 2

import { Component, ElementRef, HostListener, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-custom-template',
  templateUrl: './custom-templates.component.html',
})
export class CustomTemplatesComponent {


  public formId = 1;
  
  ngOnInit() {
  }

  public accessCustomFormData(): void {
     // here i want to access that custom form data
  }

}

NGRX store is new for me, so I am not sure if I can use it to store and subscribe data on a route change. Can any one guide me here?

What is the best approach to access one component's data on anothers' after navigation.
Is it a good idea to use route param/data attribute to pass heavy data?
If data is kept in store, is it possible to subscribe/access it on navigation?

score 1 · Answer 1 · answered May 08 '22 at 10:23

If sharing the link with JSON as URL param is a case that needs to be implemented, you can encode it as described here https://stackoverflow.com/a/27578923/18985812.
If not, the simplest way is to store data in service using private BehaviorSubject and public Observable as described here https://stackoverflow.com/a/62524192/18985812.
You can consider using NgRx or even better https://www.ngxs.io/ in case you need to store not only this JSON but other data (current user for example) as a local app state.

How do i pass heavy json data object on navigation in angular 12?

1 Answers1