title: Angular 2 | How to set style to dynamic component style according to parent creating the component?
body: <p>I have the following HTML:</p>
  
  <pre><code>  &lt;ul infraTooltip toolTipOptions="{check: 1}"&gt;
  </code></pre>
  
  <p>I have created a directive, which on its host is loading a dynamic component:</p>
  
  <pre><code>@Directive({
    selector: '[infraTooltip]'
  })
  export class InfraTooltipDirective {
    @Input() toolTipOptions: any =  {};
  
    constructor(private componentFactoryResolver: ComponentFactoryResolver,
                private viewContainerRef : ViewContainerRef ) {
    }
  
    @HostListener('mouseenter', ['$event', '$target'])
    showTooltip ($event) {
      this.loadContainerComponent();
    }
    @HostListener('mouseleave', ['$event', '$target'])
    hideTooltip ($event) {
      this.clearContainerComponent();
    }
  
    loadContainerComponent () {
      let componentFactory = this.componentFactoryResolver.resolveComponentFactory(TooltipContainerComponent);
      let componentInstance =  this.viewContainerRef.createComponent(componentFactory);
      componentInstance.instance.toolTipOptions = this.toolTipOptions;
    }
  </code></pre>
  
  <p>I want to style my dynamic component according to the <strong>host of the directive</strong> - in my case, the <strong>ul</strong>, in order to achieve something like having my dynamic component left: 10px from the <strong>ul</strong>.</p>