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.


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;
}

#