What is the proper way to add [ngClass] to host element programmatically if element was created dynamically?

Question

I have dynamically created element

initElem() {
let childElFactory = this._cfRes.resolveComponentFactory(childElCmp);
// _cfRes is ComponentFactoryResolver
let childElRef = this._vcRef.createComponent(childElFactory);
// _vcRef is ViewContainerRef
childElRef.instance.childElModel = someModel;
}

and I want to add

[ngClass]="{active: childElModel.active}"

attribiute and

#childEl

attribiute to host element of childElCmp.

I don't want to use elementRef as it's not a proper way. I think Renderer is what I am looking for but I don't know how to use it in the right way.

Answer 1

You can't apply [ngClass]... or any other binding to a dynamically added component.

You can add

@HostBinding('class.active') isActive:boolean = false;

into your dynamically added component and then use

childref.instance.isActive = true;

To get the active class added/removed from the component.

Or you can inject ElementRef into the parent component and use

elementRef.nativeElement.querySelector('child-el').classList.add('active');