I have an application written in Angular2. In one ponent, there's a chart, you can adjust it by setting few variables. I would like the user to have pletely set chart with these variables already set by the URL link.

For example: localhost:4200/app/chart?height=500;width=400;color=blue

Inside my ponent, there are variables called:

this.height: number;
this.width: number;
this.color: string;

And that is my question, how can I set them exactly from the URL link, on ponent load? (on init)

And my second question, how can I pass these variables into URL? For example, I have these variables:

this.height: number = 500;
this.width: number = 400;
this.color: string = blue;

How can I send them to the URL? To make it look like:

localhost:4200/app/chart?height=500;width=400;color=blue`

My routing file:

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

import { ChartComponent } from './chart/chart/index';

const appRoutes: Routes = [
  { path: 'app', ponent: AppComponent,
    children: [
      { path: 'chart', ponent: ChartComponent },
      { path: '', ponent: DashboardComponent }
    ]},

  // otherwise redirect to home
  { path: '**', redirectTo: '' }
 ];

export const routing = RouterModule.forRoot(appRoutes);

I have an application written in Angular2. In one ponent, there's a chart, you can adjust it by setting few variables. I would like the user to have pletely set chart with these variables already set by the URL link.

For example: localhost:4200/app/chart?height=500;width=400;color=blue

Inside my ponent, there are variables called:

this.height: number;
this.width: number;
this.color: string;

And that is my question, how can I set them exactly from the URL link, on ponent load? (on init)

And my second question, how can I pass these variables into URL? For example, I have these variables:

this.height: number = 500;
this.width: number = 400;
this.color: string = blue;

How can I send them to the URL? To make it look like:

localhost:4200/app/chart?height=500;width=400;color=blue`

My routing file:

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

import { ChartComponent } from './chart/chart/index';

const appRoutes: Routes = [
  { path: 'app', ponent: AppComponent,
    children: [
      { path: 'chart', ponent: ChartComponent },
      { path: '', ponent: DashboardComponent }
    ]},

  // otherwise redirect to home
  { path: '**', redirectTo: '' }
 ];

export const routing = RouterModule.forRoot(appRoutes);

• javascript
• angular
• variables
• url
• typescript

Share Improve this question Follow edited Mar 18, 2017 at 20:11 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Mar 15, 2017 at 21:09 J.DoeJ.Doe 5111 silver badge33 bronze badges 2

• Can you please paste your route configuration? I think your answer lies in the @angular/router namespace :) – A1rPun Commented Mar 15, 2017 at 21:18
• 1 @A1rPun Done my friend – J.Doe Commented Mar 15, 2017 at 21:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(
      (params: any) => {
        this.height: number = params['height'];
        this.width: number = params['width'];
        this.color: string = params['color'];
      }
    );
  }