CODEWITHSUNDEEP
angularangular2-template
j2L4e
j2L4e

Reputation: 7060

Rendering Angular2 components by class selector

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?

Upvotes: 3

Views: 3949

Answers (2)

Hunter Wang
Hunter Wang

Reputation: 1

Why it's not work is because when you use [class],it's meaning that "class" is an attr not assigning "mycomponent" class to div.

Upvotes: -1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658165

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

Upvotes: 3

Related Questions