Wie fügt man css class zum root der Komponente hinzu?

Question

Ich habe versucht, Bootstrap-Grid-Klassen zu der Movie-Magier-Karte Vorlage so hinzufügen und Movie-Image-Card-Komponente in Film-Bild-Raster-Komponente verwendet.

Film-Bild-card.component.html

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

Film-Bild-grid

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

Doch diese Bootstrap-Grid-Klassen funktionieren nicht richtig, da Film-Bild -card selbst hat keine col * -Klasse. Stattdessen sehe ich extra Wrapper.

Die Klassen arbeiten, wenn ich Klassen wie unten hinzufügen. Ich möchte jedoch nicht jedes Mal Klassen hinzufügen, wenn ich Movie-Image-Card verwende.

Wie erreiche ich das ??

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

Answer 1

hinzufügen

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

Ihrer Komponente Dekorateur.

Demo: http://plnkr.co/edit/yo8fiskwBwX83uLgKWca?p=preview