Access to directives of a component

Question

How can I have access to the directives that are being applied to my component?

I have my component ButtonSidenavComponent:

import { ActivatedRoute } from '@angular/router';
import { Component, ElementRef, Input, OnInit } from '@angular/core';

@Component({
  selector: 'button-sidenav',
  templateUrl: './button-sidenav.component.html',
  styleUrls: ['./button-sidenav.component.css', '../../../app.component.css']
})
export class ButtonSidenavComponent implements OnInit {
  
  @Input() page: String = '';
  @Input() icon: String = '';
  actualRoute: any
  element: ElementRef

  constructor(private route: ActivatedRoute, element: ElementRef) {
    this.actualRoute = this.route.snapshot.routeConfig?.path
    this.element = element
  }

  ngOnInit(): void {
    this.activateButton(this.element)
  }

  activateButton(el: ElementRef): void{
    console.log(el)
  }

}

Where the template is as:

<button class="custom-width h-14 flex justify-start items-center pl-7 mb-1 rounded-lg">
    <span class="material-icons text-primary-light mr-4">{{icon}}</span>
    <p class="font-subtitle text-primary-light text-sm">{{page}}</p>
</button>

And it’s being initialized as:

<button-sidenav [page]="'Home'" [icon]="'home'" active></button-sidenav>

The question is, how can I have control of the directives that are being applied to my ButtonSidenavComponent, how to add or remove directives from the component under applicable conditions?