How to handle query parameters in angular 2

Question

In my routable component I have    RouteConfig      path    login     name   Login   component  LoginComponent        But how do I get the query params if I go to app url login token 1234

User · Accepted Answer

To complement the two previous answers  Angular2 supports both query parameters and path variables within routing  In  RouteConfig definition  if you define parameters within a path  Angular2 handles them as path variables and as query parameters if not   Let s take a sample    RouteConfig       path     id   component  DetailsComponent  name   Details        If you call the navigate method of the router like this   this router navigate       Details     id   companyId   param1   value1         You will have the following address   companyId param1 value1  The way to get parameters is the same for both  query parameters and path variables  The difference between them is that path variables can be seen as mandatory parameters and query parameters as optional ones   Hope it helps you  Thierry  UPDATE  After changes in router alpha 31 http query params no longer work  Matrix params  2774   Instead angular router uses so called Matrix URL notation   Reference https   angular io docs ts latest guide router html   optional-route-parameters       The optional route parameters are not separated by     and   amp   as they   would be in the URL query string  They are separated by semicolons       This is matrix URL notation     something you may not have seen before

User · Answer

It seems that RouteParams no longer exists  and is replaced by ActivatedRoute  ActivatedRoute gives us access to the matrix URL notation Parameters  If we want to get Query string   paramaters we need to use Router RouterState  The traditional query string paramaters are persisted across routing  which may not be the desired result  Preserving the fragment is now optional in router 3 0 0-rc 1   import   Router  ActivatedRoute   from   angular router    Component         export class paramaterDemo     private queryParamaterValue  string    private matrixParamaterValue  string    private querySub  any    private matrixSub  any     constructor private router  Router  private route  ActivatedRoute        ngOnInit         this router routerState snapshot queryParams  queryParamaterName        this querySub   this router routerState queryParams subscribe queryParams   gt         this queryParamaterValue   queryParams  queryParameterName                this route snapshot params  matrixParameterName        this route params subscribe matrixParams   gt        this matrixParamterValue   matrixParams  matrixParameterName                  ngOnDestroy         if  this querySub          this querySub unsubscribe              if  this matrixSub          this matrixSub unsubscribe                  We should be able to manipulate the   notation upon navigation  as well as the   notation  but I only gotten the matrix notation to work yet  The plnker that is attached to the latest router documentation shows it should look like this   let sessionId   123456789  let navigationExtras       queryParams     session id   sessionId      fragment   anchor         Navigate to the login page with extras this router navigate    login    navigationExtras

User · Answer

For Childs Route Only such as  hello-world   In the case you would like to make this kind of call     hello-world foo bar amp fruit banana  Angular2 doesn t use   nor  amp  but   instead  So the correct URL should be     hello-world foo bar fruit banana  And to get those data     import   Router  ActivatedRoute  Params   from   angular router    private foo  string  private fruit  string   constructor    private route  ActivatedRoute    private router  Router         ngOnInit       this route params forEach  params  Params    gt          this foo   params  foo          this fruit   params  fruit            console log this foo  this fruit      you should get your parameters here     Source   https   angular io docs ts latest guide router html

User · Answer

The simple way to do that in Angular 7  is to   Define a path in your  -routing module ts    path    yourpage   component  component-name     Import the ActivateRoute and Router module in your component and inject them in the constructor  contructor private route  ActivateRoute  private router  Router           Subscribe the ActivateRoute to the ngOnInit   ngOnInit          this route queryParams subscribe params   gt          console log params             page   2               Provide it to a link    lt a  routerLink      yourpage     queryParams     page  2    gt 2 lt  a gt

User · Answer

According to Angular2 documentation you should use    RouteConfig       path    login  token   name   Login   component  LoginComponent        Component   template   login    token       class LoginComponent     token  string     constructor params  RouteParams          this token   params get  token

User · Answer

For Angular 4   Url   http   example com company 100   Router Path     const routes  Routes         path   company  companyId   component  CompanyDetailsComponent        Component    Component     selector   company-details     templateUrl     company details component html     styleUrls      company component css      export class CompanyDetailsComponent     companyId  string      constructor private router  Router  private route  ActivatedRoute              this route params subscribe params   gt              this companyId   params companyId            console log  companyId    this companyId                     Console Output      companyId   100

User · Answer

Angular2 v2 1 0  stable    The ActivatedRoute provides an observable one can subscribe     constructor       private route  ActivatedRoute            this route params subscribe params   gt         let value   params key           This triggers everytime the route gets updated  as well   home files 123   -    home files 321

User · Answer

In Angular 6  I found this simpler way   navigate    yourpage      someParamName    paramValue        Then in the constructor or in ngInit you can directly use   let value   this route snapshot params someParamName

User · Answer

Angular 4  I have included JS  for OG s  and TS versions below   html  lt a  routerLink   quot    search     tag   fish      quot  gt A link lt  a gt   In the above I am using the link parameter array see sources below for more information  routing js  function app        app routing   ng router RouterModule forRoot             path      component  indexComponent              path   search   component  searchComponent              window app     window app          searchComponent js  function app        app searchComponent           ng core Component               selector   search                   templateUrl   view search html                              Class                   constructor    ng router Router  ng router ActivatedRoute  function router  activatedRoute                       Pull out the params with activatedRoute                    console log   params   activatedRoute snapshot params                      Object  tag   quot fish quot                                       window app     window app          routing ts  excerpt  const appRoutes  Routes         path      component  IndexComponent        path   search   component  SearchComponent       NgModule     imports        RouterModule forRoot appRoutes         other imports here               export class AppModule      searchComponent ts import  rxjs add operator switchMap   import   OnInit   from   angular core   import   Router  ActivatedRoute  Params   from   angular router    export class SearchComponent implements OnInit    constructor     private route  ActivatedRoute     private router  Router      ngOnInit         this route params        switchMap  params  Params    gt  doSomething params  tag         More infos   quot Link Parameter Array quot  https   angular io docs ts latest guide router html   link-parameters-array  quot Activated Route - the one stop shop for route info quot  https   angular io docs ts latest guide router html   activated-route

User · Answer

Angular 5  Update     The route snapshot provides the initial value of the route parameter   map  You can access the parameters directly without subscribing or   adding observable operators  It s much simpler to write and read    Quote from the Angular Docs  To break it down for you  here is how to do it with the new router   this router navigate    login      queryParams    token  1234         And then in the login component  notice the new  snapshot added    constructor private route  ActivatedRoute     ngOnInit         this sessionId   this route snapshot queryParams  token

User · Answer

This worked for me  as of Angular 2 1 0    constructor private route  ActivatedRoute     ngOnInit          Capture the token  if available   this sessionId   this route snapshot queryParams  token

User · Answer

RouteParams are now deprecated   So here is how to do it in the new router   this router navigate    login     queryParams    token  1234       And then in the login component you can take the parameter   constructor private route  ActivatedRoute     ngOnInit            Capture the token  if available     this sessionId   this route queryParams  token        Here is the documentation

[javascript] How to handle query parameters in angular 2

Examples related to javascript

Examples related to jquery

Examples related to angular

Examples related to angular2-routing