Angular - Apply class to component root element not selector

Question

I have a card component in my app. Based off what type of card it is there is a different style that needs to be applied to the root element of the template. When I do this:

<card class="card-type-class"></card>

My html ends up looking like this:

<card class="card-type-class">
    <div class="other-constant-classes">
        content of my card
    </div>
</card>

Instead of like this:

<card>
    <div class="other-constant-classes card-type-class">
        content of my card
    </div>
</card>

Is there anyway to apply classes from the selector to the root element of the component template?

***Sorry if this has been asked, I had a hard time figuring out how to search for that question...

would an attribute based selector work ? selector: '[tn-labelfor]', usage <label tn-labelfor change stuff this.renderer.setElementAttribute(this.elementRef.nativeElement,'class','my class'); — Steve Drake
– Steve Drake, Commented May 15, 2017 at 16:43

chrispy · Accepted Answer · 2017-05-15 17:03:37Z

2

You could always pass in the class as a string:

<card [myClass]="'card-type-class'"></card>

Then in the lower component:

@Input() myClass: string;

And the HTML:

<div class="other-constant-classes {{myClass}}">
    content of my card
</div>

answered May 15, 2017 at 17:03

chrispy

3,6321 gold badge14 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Angular - Apply class to component root element not selector

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related