Я хочу, чтобы (bootstrap) панель навигации меняла цвет при маршрутизации на указанную c страницу

Question

Я попытался ввести функцию переключения, но это дает результат только при повторном нажатии на ту же ссылку. Я хочу, чтобы он переключался при переходе по ссылке и выходил из нее, нажимая другую ссылку.

css Я хочу реализовать:

.change { background-color: darkorchid !important; }

html вызов:

<li class="nav-item">
    <button class="nav-link btn btn-primary" routerLink="design" (click)="toggleclass()" >design testing</button>
</li>

Класс:

<nav [class.change]="classapplied" class="navbar navbar-expand-md bg-primary sticky-top list-unstyled">

и, наконец, функция .ts:

classapplied = false;

toggleclass() {
    this.classapplied = !this.classapplied;
}

Вот как это выглядит сейчас :

Как я хочу, чтобы он выглядел при посещении сайта:

Любые советы о том, как это исправить или лучший способ выполнить то, что я хочу, с благодарностью.

РЕДАКТИРОВАТЬ:

Я также пытался использовать RouterLinkActive, но мне удалось изменить только тег, но не родительский тег навигации.

Возможно, какое-то дальнейшее объяснение того, как я мог бы лучше использовать RouterLinkActive.