How to pass dynamic data via routing?

Question

I would like to send the filters propriety from search-products.component.ts to ProductsListComponent via routing. Is it possible?

I am being able to pass static data but what about dynamic data?

This is my demo code:

app.routing.ts

import { Routes, RouterModule } from '@angular/router';

import { SearchProductsComponent } from './search-products/search-products.component';
import { ProductsListComponent } from './products-list/products-list.component';

const routes: Routes = [
    { path: 'search-products', component: SearchProductsComponent },
    { path: 'products-list', component: ProductsListComponent,data:{key:'value'}}
];

export class AppRoutingModule { }

export const AppRoutingRoutes = RouterModule.forRoot(routes);

search-products.component.ts

import { Component, OnInit} from '@angular/core';
import { Router }            from '@angular/router';

@Component({
    selector: 'search-products',
    templateUrl: 'search-products.component.html',
})

export class SearchProductsComponent implements OnInit {

    filters = { warehouses: ['A','B'], locations: ['Europe','America']}; 

    constructor(private router : Router) { }

    ngOnInit() {}

    goToProductsList() {
        this.router.navigate(['/products-list']);
    }


}

kit · Accepted Answer · 2016-09-14 14:42:52Z

1

you could try

this.router.navigate(['/products-list',encodeURI(JSON.stringify(this.filters))]);

change routes to:

const routes: Routes = [
  { path: 'search-products', component: SearchProductsComponent },
  { path: 'products-list/:data', component: ProductsListComponent}
];

and JSON.parse(decodeURI(data)) in products-list

answered Sep 14, 2016 at 14:42

kit

4,9203 gold badges26 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Elkin Over a year ago

Thanks for the answer :)

Collectives™ on Stack Overflow

How to pass dynamic data via routing?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related