How to get element by class in directive (Angular 11)

  angular, angular-directive, typescript

I have the following code from my directive.

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[loaderInput]',
})
export class LoaderInputDirective {
  constructor(private _element: ElementRef, private _renderer: Renderer2) {
    this._renderer.setStyle(
      this._element.nativeElement.querySelector('.bento-busyloader-front-blocker'),
      'background',
      'transparent',
    );
    this._renderer.setStyle(
      this._element.nativeElement.querySelector('.bento-busyloader-blocker'),
      'background',
      'transparent',
    );
    this._renderer.setStyle(
      this._element.nativeElement.querySelector(
        '.bento-busyloader-blocker .bento-busyloader-wrapper .bento-busyloader-inner',
      ),
      'text-align',
      'right',
    );
    this._renderer.setStyle(
      this._element.nativeElement.querySelector(
        '.bento-busyloader-blocker .bento-busyloader-wrapper',
      ),
      'width',
      'calc(100% - 30px)',
    );
  }
}

I have to apply the following css code below to the element.

:host ::ng-deep bento-combobox .bento-busyloader-front-blocker,
:host ::ng-deep bento-combobox .bento-busyloader-blocker {
  background: transparent;
}
:host ::ng-deep bento-combobox .bento-busyloader-blocker .bento-busyloader-wrapper .bento-busyloader-inner {
  text-align: right;
}
:host ::ng-deep bento-combobox .bento-busyloader-blocker .bento-busyloader-wrapper {
  width: calc(100% - 30px);
}

however i cant select as classes and change as tried above, what i intend to do is possible? if yes what is the solution to the above problem, if not what can i do to make it available globally in my application?

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.