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?

Günter Zöchbauer · Accepted Answer · 2016-04-28 10:46:11Z

3

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

edited Apr 28, 2016 at 10:46

answered Apr 27, 2016 at 11:57

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zze Over a year ago

Is this the same for something like: <div class="template-class-{{templateID}}></div>" accompanied with: selector: '.template-class-1'?

Günter Zöchbauer Over a year ago

Yes exactly, because dynamic HTML like your example doesn't work for selectors. See also stackoverflow.com/questions/36325212/…

Hunter Wang · Accepted Answer · 2016-09-08 06:27:41Z

-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.

answered Sep 8, 2016 at 6:27

Hunter Wang

12 bronze badges

Collectives™ on Stack Overflow

Rendering Angular2 components by class selector

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related