title: How to apply CSS classes to another component in AngularDart?
body: <p>Let's say there is a simple framework to display popups:</p>
  
  <pre><code>@Component(
    selector: 'popup-host',
    template: '''
        &lt;div class="popup-container"&gt;
          &lt;ng-template #popupRef&gt;&lt;/ng-template&gt;
        &lt;/div&gt;
    ''',
    styles: ['.popup-container { position: absolute; top: 100; left: 100; z-index: 100; }'],
  )
  class PopupContainerComponent {
    final PopupController _controller;
    final ComponentLoader _loader;
  
    PopupContainerComponent(this._controller, this._loader);
  
    void ngOnInit() {
      _controller.container = this;
    }
  
    @ViewChild('popupRef', read: ComponentRef)
    ComponentRef popupRef;
  
    void render(PopupConfig config) {
      final componentRef = _loader.loadNextTo(config.factory, popupRef);
      if (componentRef.instance is HasValueSetter) {
        componentRef.instance.value = config.value;
      }
    }
  }
  
  @Injectable()
  class PopupController {
    PopupContainerComponent _container;
    set container(PopupContainerComponent container) =&gt; _container = container;
  
    void showPopup(PopupConfig config) {
      container.render(config);
    }
    ...
  }
  
  class PopupConfig {
    final ComponentFactory factory;
    final dynamic value;
    PopupConfig(this.factory, [this.value]);
  }
  
  abstract class HasValueSetter {
    set value(dynamic value);
  }
  </code></pre>
  
  <p>This can then be used like this:</p>
  
  <pre><code>// Somewhere in the root template
  &lt;popup-host&gt;&lt;/popup-host&gt;
  
  // In popup.dart
  @Component(
    selector: 'happy-popup',
    template: '''
        &lt;div class="header"&gt;This is the popup content.&lt;/div&gt;
        &lt;div class="main"&gt;The value is {{value}}.&lt;/div&gt;
        &lt;div class="footer"&gt;I am happy!&lt;/div&gt;
    ''',
  )
  class HappyPopupComponent implements HasValueSetter {
    @override
    dynamic value;
  }
  
  // In some_other.dart
  @Component(
    ...
    styles: [
      '.header { font-weight: bold }',
      '.main { color: red }',
      '.footer { color: green; font-style: italic }',
    ],
    ...
  )
  class SomeOtherComponent {
    final PopupController _popupController;
    ...
    SomeOtherComponent(this._popupController, ...) ...;
  
    void displayPopup() {
      _popupController.showPopup(HappyPopupComponentNgFactory, 42);
    }
  }
  ...
  </code></pre>
  
  <p>Is there a way to forward styles from <code>&lt;some-other-component&gt;</code> to <code>&lt;happy-popup&gt;</code> without having to define them at the root of the app?</p>