How to add css class to the root of component?

Question

I tried to add bootstrap grid classes to the movie-mage-card template like that and used movie-image-card component in movie-image-grid component.

movie-image-card.component.html

<div id="movie-image-card" class="col-12 col-sm-6 col-md-4">
</div>

movie-image-grid

   <div class="container">
        <div class="row">
            <movie-image-card></movie-image-card>
        </div>
    </div>

However, this bootstrap grid classes does not work properly since movie-image-card itself does not have col-* class. Instead, I see extra wrapper.

The classes work if I add classes like below. However, I do not want to add classes every time I use movie-image-card.

How to achieve this ??

<div class="container">
    <div class="row">
        <movie-image-card class="col-12 col-sm-6 col-md-4"></movie-image-card>
    </div>
</div>

JB Nizet · Accepted Answer · 2017-04-15 16:35:46Z

2

Add

host: {'class': 'col-12 col-sm-6 col-md-4'}

to your component decorator.

answered Apr 15, 2017 at 16:35

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

1 Answer 1