CODEWITHSUNDEEP
angularangular2-routing
Elkin
Elkin

Reputation: 900

How to pass dynamic data via routing?

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


}

Upvotes: 1

Views: 1032

Answers (1)

kit
kit

Reputation: 4920

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

Upvotes: 1

Related Questions