banjocode How To Get Query Parameters in Angular

How To Get Query Parameters in Angular

Query parameters in Angular allows for passing data across routes in your web application. They are often also mixed with the path variables - here I'll show the difference and how to get both of them.

2 min read

Query params

Query params are the most usual to work with within web development, they follow this pattern:

/app?param1=hello&param2=hi

You can get them via an observable, within the ActivatedRoute, using the queryParams method.

success: string;

constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe(params => {
        this.success = params["success"];
    });
}

Path variables

Path variables are those that you create within your Angular application.

/user/:id

These can simply be accessed using the route’s snapshot method.

id: string;
constructor(private route: ActivatedRoute) {
    this.id = this.route.snapshot.params.id;
}