Angular RouterLink Issue

Question

Object: I have a menu with a searchBarInput on InputValueChange

=> update the url by adding a key search with the input value

=> it work well but by doing that I destroyed the sidebar routerLinkActive system.

why ? and how to resolve it?

Html

<div class="sidebar">
  <ul>
    <li>
      <a routerLink="/home" routerLinkActive="active">Home</a>
    </li>
    <li>
      <a routerLink="/about" routerLinkActive="active">About</a>
    </li>
  </ul>
  <div class="search-bar">
    <input type="text" [(ngModel)]="searchQuery" (ngModelChange)="onSearchQueryChange()">
  </div>
</div>

Typescript

// sidebar.component.ts

import { Component } from '@angular/core';
import { QueryParamService } from './query-param.service';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent {
  searchQuery: string = '';

  constructor(private queryParamService: QueryParamService) {}

  onSearchQueryChange() {
    // Create a JSON object with the search query parameter
    const queryParams = { search: this.searchQuery };

    // Call the service to update the query parameters
    this.queryParamService.updateQueryParams(queryParams);
  }
}

Service

// query-param.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class QueryParamService {
  constructor(private router: Router, private route: ActivatedRoute) {}

  updateQueryParams(queryParams: { [key: string]: string | number }) {
    const currentQueryParams = { ...this.route.snapshot.queryParams };
    const updatedQueryParams = { ...currentQueryParams, ...queryParams };

    this.router.navigate([], {
      relativeTo: this.route,
      queryParams: updatedQueryParams,
      queryParamsHandling: 'merge',
    });
  }
}

the routerLink is not updating on link change

The components are switching

Are you facing any error? pls check the console window and let me know if it's showing any error. — Ramesh Rajendran
– Ramesh Rajendran, Commented Sep 25, 2023 at 9:24
no error nothing, without the router.navigate the routerActiveLink work but the queryParam search ofc doesn't go inside the url — Python
– Python, Commented Sep 25, 2023 at 9:43

FunkMonkey33 · Accepted Answer · 2023-09-25 09:44:33Z

0

why?

It's because your routes don't match anymore. When you append your search parameter to the url, the route no longer matches.

and how to resolve it?

The documentation goes over this: https://angular.io/guide/routing-with-urlmatcher and https://angular.io/api/router/RouterLinkActive

Basically you need to set a routerLinkOptions property. A decent example can be found here: How RouterLink and RouterLinkActive work?.

answered Sep 25, 2023 at 9:44

FunkMonkey33

2,2663 gold badges21 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Python Over a year ago

so as I understand I should do this <a routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{exact: false}">Home</a> but it doesn't work to. Btw the value false is the default value if I'm not wrong. And is the route route realy changing ? because the route is still '/home' but with a queryParam '/home?search=helloWorld'

FunkMonkey33 Over a year ago

You should probably post your route table then.

Python Over a year ago

I made a prototype and the code is working well, the issue is some where else in the project. I have to investigate. Thanks for your help

Collectives™ on Stack Overflow

Angular RouterLink Issue

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related