title: How to add style class to a created ComponentRef in Angular 5?
body: <p>I am trying to add a CSS class to a component immediately after I create it using <code>ViewContainerRef</code> and <code>ComponentFactoryResolver</code>. I want to be able to set the class based on what other Components have already been added to <code>myViewContainerRef</code>.</p>
  
  <pre><code>export class ContainerComponent {
  
  @ViewChild('myContainerRef') myContainerRef: ViewContainerRef
  
  constructor(private factoryResolver: ComponentFactoryResolver,
              private renderer: Renderer2) {}
  
  addComponent() {
    const componentFactory = this.factoryResolver.resolveComponentFactory(SomeBaseComponent)
    const newComponent = this.myContainerRef.createComponent(componentFactory)
  
    // SomeBaseComponent has been added successfully to myContainerRef
    // Want to add CSS class to the newComponent
    // None of the following statements are adding any styles
    if( someLogic()) {
      this.renderer.addClass(newComponent.location.nativeElement, 'my-css-class')
      this.renderer.addClass(newComponent.el.nativeElement, 'my-css-class')
      this.renderer.setStyle(newComponent.el.nativeElement, 'background', 'yellow')
    }
    }
  }
  
  export class SomeBaseComponent {
  
    constructor(public el: ElementRef) {}
  
  }
  </code></pre>
  
  <p>Is there a better way to go about trying to add the style programmatically? Is there something else I can inject into <code>SomeBaseComponent</code> to be able to add the styles I want at this point, or should I set flags on the <code>newComponent.instance</code> and have the base component be in control of what styles to set on itself?</p>