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

• 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

1 Answer 1

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