Angular 6 passing in parameters into URL

Question

So I have an angular app that currently has a route such "urlname/stockdata". I would like to be able to pass in a stock symbol into that url such as "urlname/stockdata/AAPL". My app is making a call to a third party API with that symbol. Do you guys have any advice on how I can do that. Any help is appreciated. Thanks

Maarti · Accepted Answer · 2018-11-24 05:49:40Z

18

You can declare a route with parameters like this:

export const routes: Routes = [
  { path: 'urlname/stockdata/:id', component: MyComp}
];

Create a link in the template:

<a [routerLink]="['/urlname/stockdata', id]">MyLink</a>

Or navigate from the .ts:

 this.router.navigate(['/urlname/stockdata', id]);

Then you can read it with:

constructor(private route: ActivatedRoute) {}

this.route.params.subscribe(params => {
  this.id = params['id'];
});

edited Nov 24, 2018 at 5:49

answered Nov 24, 2018 at 5:41

Maarti

3,7294 gold badges20 silver badges36 bronze badges

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

1 Comment

Jake v1 Over a year ago

This worked great for me. Question: How do I make this work with a direct url? I get an error: "Refused to apply style from 'localhost:4200/userAdmin/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."

Sandeep Patel · Accepted Answer · 2019-11-06 09:54:49Z

1

TS File

const routes: Routes = [{
  path: '',
  children: [{
    path: 'plans/:id',
    component: PlanListComponent,
    canActivateChild: [AuthGuard]
  }]
}];

HTML

<a class="dropdown-item" (click)="viewDetails(product.id)">View Detail</a>

TS

 viewDetails (productId) {
        this.router.navigate([ BASE_URL +"/plans/" + productId]);
    }

answered Nov 6, 2019 at 9:54

Sandeep Patel

2,5372 gold badges16 silver badges21 bronze badges

Comments

Devashish Maurya · Accepted Answer · 2019-09-18 11:42:13Z

First of all , consider you have to send 4 parameters in URL for eg. Zone, State, MP & JC .
For this go to file sample.component.ts


 functionName() {
 let param={
      zone:this.selectZone,
      state:this.selectState,
      jc:this.stateJC,
      mp:this.MPdata
    }

 this.availservice.AvailReport(param)
      .subscribe((json) => {
      this.ArrayResponse= json;
      } );
}

Now come to file sample.service.ts

 AvailReport(param) {  
let UrlTemp= `http://11.111.11.11:3838/getdata/AVAILABILITY_${param.zone}_${param.state}_${param.jc}_${param.mp}.JSON?callback=true`;
    return this.http.get(UrlTemp);
  }

For sure your will get response like :

Request URL: http://10.141.55.49:3838/getdata/AVAILABILITY_ZoneName_StateName_MPName_JCName.JSON?callback=true

Using this method you pass any number of parameters in URL & Ask your backend team to recieve the parameters.

Collectives™ on Stack Overflow

Angular 6 passing in parameters into URL

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related