How to use ActivatedRoute in Angular 5?

Question

I am trying to do exactly the same thing as in this post: Angular 4 get queryString

I am using Angular 5.2.5.

ActivatedRoute seems to be the thing to use to retrieve querystring values off the URL when the user first visits the website. However, I am unable to figure out what I need to import to be able to use ActivatedRoute.

Could someone specify exactly what needs to be added to the app.module.ts file, and the component.ts file where I am trying to use ActivatedRoute?

This post specifies adding routing to the imports array of the @NgModule: No provider for ActivatedRoute - Angular 2 RC5. However, I don't have an app.routing.ts file. Do I have to create an app.routing.ts file to use ActivatedRoute?

score 19 · Answer 1 · answered May 10 '19 at 06:44

ActivatedRoute Contains the information about a route associated with a component loaded in an outlet. It can also be used to pass data from one component to another component using route such as Id, flag, state etc.

http://localhost:4200/quiz/edit_quiz/032

032 being id of the quiz you wanna edit.

Get this id in your component(in my case let it be edit_quiz.compontent.ts) to use by using Activated Route.

Step 1: Import ActivatedRoute from Router module.

import { ActivatedRoute } from '@angular/router';

Step 2: Inject ActivatedRoute in constructor.

  constructor(private activatedRoute: ActivatedRoute) { }

Step 3: Get id on a local variable named quizId in ngOnInit(){}

   ngOnInit() {
    this.quiz_id = this.activatedRoute.snapshot.params['id'];
   }

Now we have id in edit_quiz.component.ts to use.

score 3 · Answer 2 · answered May 03 '18 at 23:36

I made the two changes Arun suggested. Then, to fix the "No provider for ActivatedRoute" error, I made the changes shown below.

1) I added this line to the app.module.ts:

import { RouterModule } from '@angular/router';

2) I added this line to the imports array of the @NgModule in app.module.ts:

RouterModule.forRoot([])

This article gave me the fix: Angular error: no provider for ActivatedRoute

Now it compiles. Hooray!

Arun Amatya · Answer 3 · 2018-05-05T12:46:03.437

2

You need to import ActivatedRoute from @angular/router like

import { ActivatedRoute } from '@angular/router';

then add this line to the imports array of the @NgModule in app.module.ts:

imports:[
        ........,
        RouterModule.forRoot()
],

then you can use any where as below:

constructor(private route: ActivatedRoute) {
     console.log(route.snapshot.queryParamMap); // this
}
// or
queryString : string;
getQueryString(){
   this.queryString = this.route.queryParamMap.get('myQueryParam');
}

No. You don't need app.routing.ts if you don't have to navigate pages within your app.

edited May 05 '18 at 12:46

answered May 03 '18 at 22:48

Arun Amatya

51
2
9

So I added the import line and the constructor parameter to my component.ts file, but now I get this error: ERROR Error: StaticInjectorError(AppModule)[SubmitPaymentComponent -> ActivatedRoute]: StaticInjectorError(Platform: core)[SubmitPaymentComponent -> ActivatedRoute]: NullInjectorError: No provider for ActivatedRoute! – Mark Nugent May 03 '18 at 23:15
ohh sorry i forgot to say about the provider.. you figured it out by yourself.. that's great !!! – Arun Amatya May 04 '18 at 14:22

score 2 · Answer 4 · answered Sep 18 '20 at 14:42

How to Get Route Parameters: The Angular Router provides two different methods to get route parameters:

a. Using the route snapshot(ActivatedRoute),

b. Using Router Observables

ActivatedRoute in Angular: Provides access to information about a route associated with a component that is loaded in an outlet

Step-1 Import the ActivatedRoute interface

import { Router, ActivatedRoute } from '@angular/router';

Step-2 Inject the ActivatedRoute in Constructor

constructor(private route: ActivatedRoute, private router: Router) {}

Step-3 To fetch a employee object by the given id and assign that object to its local employee property.

ngOnInit() {
    this.employee = new Employee();
this.id = this.route.snapshot.params['id'];

Note: Property Description

  snapshot: The current snapshot of this route

score 0 · Answer 5 · answered Sep 05 '19 at 17:35

ActivatedRoute

I'm late to the conversation but hope the following works for the future programmers who encounter the same issue.

import the ActivatedRoute

import { ActivatedRoute } from '@angular/router';

Inject the dependency injection

constructor(
    private route: ActivatedRoute,
  ) { }

and to grab the id from the link you can use the following

  ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.product = products[+params.get('productId')];
  });
}

How to use ActivatedRoute in Angular 5?

5 Answers5

Linked