How to get param from url in angular 4?
AngularAngular Problem Overview
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) => {
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:
How does Angular know the base href?
Angular Solutions
Solution 1 - Angular
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');
}
Solution 2 - Angular
Update
I belive Dimitry Grinko's answer in this post is better than this one.
Old answer
This should do the trick retrieving the params from the url:
constructor(private activatedRoute: ActivatedRoute) {
this.activatedRoute.queryParams.subscribe(params => {
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).
Solution 3 - Angular
constructor(private activatedRoute: ActivatedRoute) {
}
ngOnInit() {
this.activatedRoute.params.subscribe(paramsId => {
this.id = paramsId.id;
console.log(this.id);
});
}
Solution 4 - Angular
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
Solution 5 - Angular
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"
}
Solution 6 - Angular
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
}
}
Solution 7 - Angular
You can try this:
this.activatedRoute.paramMap.subscribe(x => {
let id = x.get('id');
console.log(id);
});
Solution 8 - Angular
app.module.ts
import { Routes,RouterModule } from '@angular/router';
const routes: Routes = [
{
path: '',
component: HomeComponent
}
{
path: '/users/:id/:name',
component: UsersComponent
}
]
@NgModule({
....
imports : [
.......,
RouterModule.appRoot(routes)
]
....
})
Component Page
import { ActivatedRoute, Params } from '@angular/router';
export class UserComponent implements OnInit {
user : {id: number, name: string};
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.user = {
id : this.route.snapshot.params['id'],
name : this.route.snapshot.params['name']
};
this.route.params.subscribe((param : Params) => {
this.user.id = param['id'];
this.user.name = param['name'];
});
}
}
Solution 9 - Angular
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 => {
console.log(params)
})
}
Solution 10 - Angular
import {Router, ActivatedRoute, Params} from '@angular/router';
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit() {
this.activatedRoute.paramMap
.subscribe( params => {
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
}
)
}
Solution 11 - Angular
Hope this helps someone. In case that u get undefined while doing this with something that's not "id", 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) => {
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["elem-type-maybe"]; // Don't do this.type = data["type"], do
data[NAME] as said above.
this.elem = this.elemService.getElem(this.type); // getElem is method in service
which returns that specific type.
});
Solution 12 - Angular
Please try this for get startdate from given your booking URL route parameter:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-hero',
templateUrl: './hero.component.html',
styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
constructor(private activeRoute: ActivatedRoute) {
this.activeRoute.queryParams.subscribe((qp) => {
console.log('Get Router Params:', this.activeRoute.snapshot.queryParams.startdate);
});
}
ngOnInit(): void {
}
}
For route URL related more information you can go through here