Dynamically add class and associated styles to element

Question

I'm working on styling ng-select with possible multiple selections and I'd like to dynamically change one of it's children elements styles so it can will have max height calculated base on Input from parent element. I need to styling exactly ".ng-value-container" class from ng-select component.

I've tried doing this by ElementRef, querySelector and I was looking for a way to find it's children so by ElementRef I would change it's styles

Ng select looks like this, so I can't just add styling on component with variable from ts file.

<ng-select class="multi-select placeholder-select" [class.required-border]="required"
    [searchable]="searchable" [(items)]="items" [searchFn]="searchFn" [closeOnSelect]="closeOnSelect"
    [multiple]="multiple" [clearable]="false" [bindLabel]="bindLabel" (focus)="onFocus()" (focusout)="onFocus()"
    (search)="onSearch($event)" (change)="onChange($event)" [(ngModel)]="chosenOption" [notFoundText]="notFoundText"
    #select>
</ng-select>

I would like the max height of this inner element with class ".ng-value-container" to be for example 150px when input was 3 and 200px when input was 4 and if there are more selected items, then element will be scrollable.

Answer 1

I found solution to this question before any answer, so I'll post it here in case someone have the same problem.

First it is needed to add reference to element (#name) for example:

<ng-select #name></ng-select>

Then use ViewChild annotation to get this element in your logic.

@ViewChild('name', { static: false }) select;

and add the end get elements children by it and specify maxHeight in ngAfterViewInit method. In my case it was something like this:

ngAfterViewInit() {
   (this.select.element.children[0].children[0] as HTMLElement).style.maxHeight = `${50 * this.input}px`;
 }