Angular 2 apply existing CSS class to a dynamic injected component

Question

I inject dynamically components to the DOM with:

let factory  = this.componentFactoryResolver.resolveComponentFactory(component); 
let injector = ReflectiveInjector.fromResolvedProviders([], refDOM.parentInjector);
let comp     = factory.create(injector);
comp.changeDetectorRef.detectChanges();
refDOM.insert(comp.hostView,position);
return comp

I have a css class:

.vbox {

       display: -webkit-box;
       display:    -moz-box;
       display:         box;

       -webkit-box-orient: vertical;
          -moz-box-orient: vertical;
           -ms-box-orient: vertical;
               box-orient: vertical;


       display: -webkit-flex;
       display:    -moz-flex;
       display:     -ms-flex;
       display:         flex;

       -webkit-flex-direction: column;
          -moz-flex-direction: column;
           -ms-flex-direction: column;
               flex-direction: column;
}

I want to apply class vbox to the :host css tag of the dynamic injected component. Since the dynamic component isn't defined in the html file before being injected, I cannot apply existing class styles like: class="vbox".

Is it possible to achieve this?

Thank you.

Günter Zöchbauer · Accepted Answer · 2017-01-24 10:43:16Z

1

You can either inside the dynamic component add

@HostBinding('class.vbox')
isVboxClass:boolean = false; // or true by default

and then enable it using

comp.instance.isVboxClass = true;

or just

comp.location.classList.add('vbox');

edited Jan 24, 2017 at 10:43

answered Jan 24, 2017 at 9:42

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Vb Dev Over a year ago

Thank you for your answer. I want to apply to the host tag itself the vbox class and not to the children of host. That is, I want to apply an existing style and not address existing elements of a class inside host. Thank you.

Günter Zöchbauer Over a year ago

I see. Misunderstood the question. and you want to add it no matter what component component actually is?

Vb Dev Over a year ago

Yes. Each dynamic component has it's specific css file defined in styleUrls. I define specific style rules inside the css file using the host tag, but, since rule vbox is used in other components, it is specified in other css file. When declaring the class explicitly in the html all works fine, but with dynamic components I cannot indicate explicitly to use the class vbox in the html.

Günter Zöchbauer Over a year ago

You can also use :host(.vbox) { ... } then ... will only applied when the class has the vbox class added. Does my answer above help solving your problem? I'm not sure from your last comment.

Vb Dev Over a year ago

@HostBinding('class.vbox') works great. Is it possible to achieve the same only by CSS? That is, not including @HostBinding('class.vbox') in the components code? Thank you.

|

Collectives™ on Stack Overflow

Angular 2 apply existing CSS class to a dynamic injected component

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related