Rendering Angular2 components by class selector

Question

My question is simple, but believe me, I've been trying to wrap my head around it for hours now.

There's a component that's to be instantiated via a class selector.

@Component({
  selector: '.mycomponent',
  template: '<h1>hello!</h1>'
})
export class MyComponent{}

Let's say the parent Component looks like this:

@Component({
  ...
  template:
      `
        <div class="mycomponent"></div> <!-- rendered -->
        <div [class]="'mycomponent'"></div> <!-- not rendered -->
      `
})
export class ParentComponent{}

Why is it that the second version is never rendered? How would I make it render? Is this a change detection issue or is it just not supposed to work this way? I've played around with the change detection strategy, which didn't have any effect. Also I've come across DynamicComponentLoader. My hopes are that I can get around using it.

Is there any way to load components dynamically via non-element selectors?

Answer 1

That is not supposed to work. Components and directives are only applied to statically added tags, attributes and classes.

If you want to dynamically add/remove components and directives use DynamicComponentLoader or createComponent() of ViewContainerRef