я хочу добавить CSS к активной кнопке .. как добавить активный класс в угловых

Question

HTML CODE

<div class="side-nav">
    <button type="button" class="btn  side_btn"  (click)="projects()">
        <i class="fa fa-tasks" aria-hidden="true"></i>
        <p>PROJECTS</p>
    </button>

    <button type="button" class="btn side_btn side_btn  side_btn_child" (click)="lifecycle()" >
        <i class="fa fa-life-ring" aria-hidden="true"></i>
        <p>LIFECYCLE</p>
    </button>  

    <button type="button" class="btn btn-default side_btn  side_btn_child" (click)="master()" >
        <i class="fa fa-asterisk" aria-hidden="true"></i>
        <p>MASTER</p>
    </button>
</div>

TS CODE

import { Component, OnInit, ViewChild, Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { Subject } from 'rxjs';
import { AuthService } from '../../common/services/auth.service';

@Component({
    selector: 'app-side-nav',
    templateUrl: './side-nav.component.html',
    styleUrls: ['./side-nav.component.css']
})

@Injectable({
    providedIn: 'root'
})


export class SideNavComponent implements OnInit {


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

ngOnInit() {
}

projects(){
    this.router.navigate(['project-management'],{relativeTo: this.route})
}

lifecycle(){
    this.router.navigate(['lifecycle'],{relativeTo: this.route})
}

master(){
    this.router.navigate(['metric-master'],{relativeTo: this.route})
}
}

как я могу использовать директиву для добавления активного класса вкнопку, которую я нажал?чтобы я мог добавить CSS к этой кнопке.

Я хочу сделать эти значки белыми (#ffffff), если кнопка активна.Заранее спасибо.

Answer 1

Шаг 1:

Создайте директиву, как показано ниже, где activeLink - это класс с желаемым css:

@Directive({
    selector: '[nav-link]'
  })
  export class NavigationDir implements OnChanges {

    constructor(private element: ElementRef, private renderer: Renderer2) {

    }

    @Input() clickedLinkText:string;

    ngOnChanges(){
      this.renderer.removeClass(this.element.nativeElement,"activeLink");
      if(this.element.nativeElement.innerText.toLowerCase()==this.clickedLinkText){
        this.renderer.addClass(this.element.nativeElement,"activeLink");
      }    
    }
  }

Шаг 2:

Измените свои кнопки, как показанониже, т.е. добавьте атрибут nav-link, передайте $ event в ваш обработчик кликов и установите свойство ввода директивы

<button type="button" class="btn  side_btn"  (click)="YourClickHandler($event) nav-link [clickedLinkText]=selectedAnchorText">
        <i class="fa fa-tasks" aria-hidden="true"></i>
        <p>PROJECTS</p>
    </button>

Шаг 3:

Добавьте новое свойство в файл TS, как показано ниже:

 selectedAnchorText: string;

Шаг 4:

Измените весь обработчик OnClickEvent, как показано ниже:

YourClickHandler(event) {
    this.selectedAnchorText=event.target.innerText.toLowerCase(); 
//Add your route logic below
}

Описание Когда вы нажмете кнопкуего обработчик событий будет запускаться и устанавливать значение свойства selectedAnchorText равным тексту или идентификатору нажатой кнопки, в зависимости от того, что вам нужно.Установка значения selectedAnchorText установит свойство ввода директивы clickedLinkText, которое, в свою очередь, вызовет хук директивы жизненного цикла ngOnChanges, в котором вы проверяете и добавляете активный класс к нажатой кнопке.

Я знаю, что ответ может быть намного лаконичнее и лучше.Пожалуйста, не стесняйтесь улучшать его.

Надеюсь, это поможет!