How to persist data when switching routes (Angular)

Question

How to save data when I navigate to another route? I have 4 routes. When I navigate to route 1 I see some data. If I navigate to route 2 and then navigate back to route 1 I don't see the previous data.

const appRoutes: Routes = [
  { path: 'stock', component: StockComponent },
  { path: 'cuit', component: CuitComponent },
  { path: 'pendientes', component: PendientesComponent },
  { path: 'cargas', component: CargasComponent },
  { path: '', redirectTo: '/stock', pathMatch: 'full' }
]

The first time I see all the data. After navigating away I see only form and thead.

<form class="form-inline addItem">
  <input class="form-control mr-sm-2" type="text" placeholder="Nombre" #addNombre>
  <input class="form-control mr-sm-2" type="number" placeholder="Stock" #addStock>
  <button class="btn btn-outline-success my-2 my-sm-0" type="button" (click)="agregar(addNombre.value, addStock.value)">Agregar</button>
</form>
<table class="table">
  <thead>
    <th>id</th>
    <th>Nombre</th>
    <th>Cantidad</th>
  </thead>
  <tbody>
    <tr *ngFor="let item of data" (dblclick)="CambiarModificacion(item)">
      <ng-container *ngIf="item.id != modificando.id">
        <td>{{item.id}}</td>
        <td>{{item.nombre}}</td>
        <td>{{item.cantidad}}</td>
      </ng-container>
      <ng-container *ngIf="item.id == modificando.id">
        <td>{{item.id}}</td>
        <td><input type="text" class="input-group-addon" value="{{item.nombre}}" [(ngModel)]="item.nombre"></td>
        <td><input type="text" class="input-group-addon" value="{{item.cantidad}}" [(ngModel)]="item.cantidad"></td>
        <td><button type="button" name="button" class="btn btn-primary" (click)="modificar(item)">Ok</button></td>
      </ng-container>
    </tr>
  </tbody>
</table>

Answer 1

You should store your data in a service instead of in the component property.

Answer 2

How to create a service class is included in the official tutorial: https://angular.io/tutorial/toh-pt4

Just add a value such as formDataStorage: any in the service class. You will have to inject the service into the component, and than edit the formDataStorage value in modificar() function.

Inject the service into route 2 page as well, and get formDataStorage will let you retrieve your value.