I am working on an Angular2 application that includes a chart component. Users can adjust the chart by setting certain variables. I want to give users the option to have the chart preset with specific variables by using a URL link.
For instance:
localhost:4200/app/chart?height=500;width=400;color=blueWithin the component, there are variables named:
this.height: number;
this.width: number;
this.color: string;
My main inquiry is how can I set these variables from the URL link when the component loads (on init)?
Secondly, how can I pass these variables into the URL itself? If I have the following variables:
this.height: number = 500;
this.width: number = 400;
this.color: string = blue;
How do I include them in the URL like this:
localhost:4200/app/chart?height=500;width=400;color=blue`
This is my routing configuration:
import { Routes, RouterModule } from '@angular/router';
import { ChartComponent } from './chart/chart/index';
const appRoutes: Routes = [
{ path: 'app', component: AppComponent,
children: [
{ path: 'chart', component: ChartComponent },
{ path: '', component: DashboardComponent }
]},
// Redirect all other routes to home
{ path: '**', redirectTo: '' }
];
export const routing = RouterModule.forRoot(appRoutes);