0

I want to hide some components if on certain pages. But I can't access params to get the id from there.

To hide components on pages with the following link structure:

/orders/:_id

  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) {
    this.ngUnsubscribe = this.router.events.subscribe(() => {
      this.currentRoute = router.url;
      console.log(this.route.snapshot.params);
      this.id = this.route.snapshot.params
      if (this.currentRoute == `/orders/${id}`) {
        this.isActive = true
      }
    });
  }
}

console.log(this.route.snapshot.params);

Result:

{}
user14324857
  • 61
  • 6
  • What about `console.log(this.route.snapshot.paramMap)`? – Kamran Khatti Oct 01 '20 at 11:19
  • Could please attach `order component routing path` as well ? – Chenna Oct 01 '20 at 11:19
  • Does this answer your question? [What is the best way to get current route params in Angular 6 services?](https://stackoverflow.com/questions/52205221/what-is-the-best-way-to-get-current-route-params-in-angular-6-services) – Romuald Oct 01 '20 at 12:38

4 Answers4

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

constructor(private route: ActivatedRoute) {
    console.log(this.route.snapshot.params);
    console.log(this.route.snapshot.data);
    this.route.params.subscribe((pParams) => { // queryParams for url?id=1
        console.log(pParams);
        //console.log(this.route.snapshot.params);
        //console.log(this.route.snapshot.data);
        if (pParams._id) { // checking if id exists
           this.isActive = true; 
        } 
    });
}
Chenna
  • 2,383
  • 3
  • 20
  • 36
  • This is a non-working way, for example at address `/orders/25` in the `console.log(params)` outputs the following result `{}` – user14324857 Oct 01 '20 at 11:04
  • Use it in constructor – Chenna Oct 01 '20 at 11:07
  • 1
    Note that your currentRoute will never equal `/orders/:_id` but rather something like `/orders/12345` assuming your id are numbers. Plus in the example above, it will output an empty object if you reference `whatev.id` instead of `whatev._id` as you defined it. – Romuald Oct 01 '20 at 11:10
0

To access your current route parameters what you could do is

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

constructor(private route: ActivatedRoute) {
  this.route.params.subscribe((params) => {
    console.log(params._id); // There you get access to your parameters
  }):
}
Romuald
  • 205
  • 1
  • 13
0

This is how to go about it

Here is an example code on how to go about it

In component.ts

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


export class ClassName implements OnInit {
 rootUrl: string;
 id: number;
 currentRoute: string;

 constructor(public router: Router, private _activatedRoute: ActivatedRoute) { }

 ngOnInit(): void {
   this.currentRoute = router.url;
   this.rootUrl = this.router.url.split('/')[1];  // gets the base folder e.g shop in "localhost:4200/shop"


   this._activatedRoute.paramMap.subscribe(
     params=>{
       this.id = +params.get('id');  // grabs the query param "id". the "+" converts it to integer
   }
);

} }

assume your url looks like "localhost:4200/shop/1234" and you want to show a component based on the url, you have to do the following:

in your component.ts, create public string variable like "currentRoute"

in the constructor, create a Router instance and an ActivatedRoute instance that will hold the url properties. Use the ActivatedRoute instance to get the query parameters from the url and assign it to the variables as demonstrated in my sample code.

then in the component.html file, add ngIf condition to the tag to determine whether to show the component or not

<app-product-header *ngIf="id > 0"></app-product-header>
Timothy
  • 87
  • 1
  • 10
0

Hi Welcome to stack overflow. For your question, you are using the params object in an incorrect manner. The route.params is still an observable which means that you need to subscribe to it to use it.

Now as for usage there are 2 ways to retrieve the parameter from the url.

1. Using the observable

this.route.params.subscribe(param => {
    this.id = param._id;

    if (this.currentRoute == `/orders/${this.id}`) { // better use regex match or a better condition here
        this.isActive = true;
      }
});

2. Using the paramMap object

this.id = this.route.snapshot.paramMap.get('_id');

if (this.currentRoute == `/orders/${this.id}`) { // better use regex match or a better condition here
    this.isActive = true;
}

Additional notes: Since I do not see how the this.currentRoute is populated, I think it is better to use something like a .substring(), .match(), or a .indexOf() function to determine if a string (order/${this.id}) exists in the url rather than using a specific string.

Ian Preglo
  • 421
  • 2
  • 10