Angular ¿How to handle two components at the same level of routing with query params?

ccv 0
Viewed 28

I have two components in Angular, but they are at the same level of routing. I mean they are in the root.

  {
    path: '', component: HomeComponent
  },
  {
    path: '', component: SearchComponent
  },

But the searchComponent should load if the root has query params like "www.root.com/?name=andrea" and the homeComponent shoud load if the root is clean "www.root.com"

How can I handle this?

Thank you so much

routes parameters angular
3 Answers

Mutliple solutions :

The first one, the easiest : create a different route for each component. There's no point in giving them two exact routes.

Second option : display the search component inside the home component when you detect query params.

Third option, one of the most obscure ones : use the canMatch guard.

MGX0

You cannot have the exact same route go to 2 different components, but what you can do is if the path is the following:

  {
    path: '', component: HomeComponent
  },
  {
    path: ':id', component: SearchComponent
  },

What this will do is whenever you go to www.root.com it will go to the HomeComponent, and when you go to www.root.com/SearchQuery it will go to SearchComponent then you can get your search query by:

constructor(private activatedRoute: ActivatedRoute) { }

ngOnInit(): void {
    this.activatedRoute.params.subscribe({
        next: params => {
          console.log(params)
        }
      })
}

However, this method might cause a lot of issues while development as the router might confuse your searchQuery parameter by another route in your website. For example for the route www.root.com/Categories it will redirect to SearchComponent as it will render "Categories" as a parameter instead of a route.

So it is better to specify a different route for the search component, or implement the search component functionality in the home component and use query parameters for searching purposes.

You can check the below documentations for your reference:

Angular Routing

Navigation With Routing

Activated Route

Osama0

Generally it's not common use queryparams else params (the url in params are more friendly: www.company.com/Andrea vs www.company.com/?name=Andrea)

But always can use a component like

  <ng-container *ngIf="{isHome:home$ | async} as home">
      <ng-container *ngIf="home.isHome">
        <app-home></app-home>
      </ng-container>
      <ng-container *ngIf="!home.isHome">
        <app-search></app-search>
      </ng-container>
    </ng-container>

Where the .ts you create an observable of queryParamMap and map to return true or false when has a queryparams "name"

  home$ = this.activatedRoute.queryParamMap.pipe(
    map(params => {
      return params.get('name')?true:false
    })
  );
  constructor(private activatedRoute: ActivatedRoute) {}

See stackblitz

NOTE: If you want to use params, the same tecnica can be used reemplace "queryParamMap" by "paramMap"

Eliseo0
Related