How to get param from url in angular 4

Question

I m trying to get startdate from the URL   The URL looks like http   sitename booking startdate 28-08-2017  My code is below   aap module ts      import              NgModule         declarations            AppComponent  ModalComponent                imports            BrowserModule          FormsModule          HttpModule          JsonpModule          ReactiveFormsModule          RouterModule forRoot                    path                      component  AppComponent                                                providers   ContactService  AddonService  MainService         bootstrap   AppComponent             export class AppModule       aap component ts  import       import  Router  ActivatedRoute  Params  from   angular router    constructor private activatedRoute  ActivatedRoute         subscribe to router event   this activatedRoute queryParams subscribe  params  Params    gt        console log params              But its giving the below error      Unhandeled Promise rejection  No base href set  Please provide a value   for the APP BASE HREF token or add a base element to the document      Zone     Task  Promise then   Value  Error  No base href set    Please provide a value for the APP BASE HREF token or add a base   element to the document    How does Angular know the base href

User · Answer

You can try this   this activatedRoute paramMap subscribe x   gt        let id   x get  id        console log id

User · Answer

Routes  export const MyRoutes  Routes           path    items  id   component  MyComponent       Component  import   ActivatedRoute   from   angular router   public id  string   constructor private route  ActivatedRoute      ngOnInit        this id   this route snapshot paramMap get  id

User · Answer

constructor private activatedRoute  ActivatedRoute       ngOnInit         this activatedRoute params subscribe paramsId   gt            this id   paramsId id          console log this id

User · Answer

The accepted answer uses the observable to retrieve the parameter which can be useful in the parameter will change throughtout the component lifecycle   If the parameter will not change  one can consider using the params object on the snapshot of the router url   snapshot params returns all the parameters in the URL in an object   constructor private route  ActivateRoute     ngOnInit        const allParams   this route snapshot params    allParams is an object    const param1   allParams param1    retrieve the parameter  param1

User · Answer

use paramMap  This will provide param names and their values    http   localhost 4200 categories 1     path   categories  category   component  CategoryComponent     import   ActivatedRoute   from   angular router    constructor private route  ActivatedRoute       ngOnInit        this route paramMap subscribe params   gt            console log params

User · Answer

In angular  They separate it into 2 kind of url    URL pattern  heroes  limit  Example   heroes 20   You can get raw value by using route snapshot paramMap get  Subscribe from route paramMap to get params  URL pattern  heroes  Example   heroes limit 20   You can get raw value by using route snapshot queryParamMap    Reference  All you need to know about Angular parameters

User · Answer

Check parameters from URL string or as  param in your routeConfig  downstream component ts      import  Router ActivatedRoute  from   angular router           export class DownstreamComponent        constructor      private route  ActivatedRoute      private router  Router         if this route snapshot queryParams         console log this route snapshot params      e g   param1 in routeConfig     if this route snapshot queryParamMap get  param1          console log this route snapshot queryParamMap get  param1        e g  in URI  param1 blah

User · Answer

This should do the trick retrieving the params from the url   constructor private activatedRoute  ActivatedRoute      this activatedRoute queryParams subscribe params   gt            let date   params  startdate            console log date      Print the parameter to the console               The local variable date should now contain the startdate parameter from the URL  The modules Router and Params can be removed  if not used somewhere else in the class

User · Answer

import  Router  ActivatedRoute  Params  from   angular router    constructor private activatedRoute  ActivatedRoute         ngOnInit         this activatedRoute paramMap      subscribe  params   gt        let id    params get  id        console log  id    id       console log params     id12 ParamsAsMap  params         keys  Array 1  0   id  length  1   proto    Array 0  params  id   12    proto    Object   proto    Object

User · Answer

Hope this helps someone  In case that u get undefined while doing this with something that s not  quot id quot   check if u are passing right parameter  If your route in parent-component ts is   onSelect elem        this router navigateByUrl   element   elem type          And in child-component ts   type  string    elem  ElemModel     constructor      private elemService  ElemService      private route  ActivatedRoute           ngOnInit         this route params subscribe  data    gt           console log data        data  will give u an object with the type inside  check the        name of that type inside console of devTool  as u will put that name inside        data HERE  down below         this type   data  quot elem-type-maybe quot       Don t do this type   data  quot type quot    do        data NAME  as said above         this elem   this elemService getElem this type      getElem is method in service        which returns that specific type

[angular] How to get param from url in angular 4?

Examples related to angular