ブートストラップグリッドでダイナミックレイアウトテンプレートを実行するにはどうすればよいですか？

Question

私はboostrapとangular 4で作業しています。私はレジスタコンポーネントを作成し、そのHTMLを他の場所で再利用したいと思います。 htmlコード他のビューで

<div class="col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3"> 
    <div class="card"> 
     <div class="card-header text-center" data-background-color="purple"> 
     <br> 
     <h4 class="title">Registrate</h4> 
     <br> 
     </div> 
     <p class="category text-center">Unete a nosotros</p> 
     <div class="card-content"> 
     <div class="input-group"> 
      <span class="input-group-addon"> 
      <i class="material-icons">face</i> 
     </span> 
      <div class="form-group label-floating"> 
      <label class="control-label">nombre</label> 
      <input type="text" class="form-control"> 
      <span class="material-input"></span> 
      </div> 
     </div> 
     <div class="input-group"> 
      <span class="input-group-addon"> 
      <i class="material-icons">email</i> 
     </span> 
      <div class="form-group label-floating"> 
      <label class="control-label">correo</label> 
      <input type="email" class="form-control"> 
      <span class="material-input"></span> 
      </div> 
     </div> 
     <div class="input-group"> 
      <span class="input-group-addon"> 
      <i class="material-icons">lock_outline</i> 
     </span> 
      <div class="form-group label-floating"> 
      <label class="control-label">contraseña</label> 
      <input type="password" class="form-control"> 
      <span class="material-input"></span> 
      </div> 
     </div> 
     <div class="footer text-center"> 
      <button type="submit" class="btn btn-rose btn-simple btn-wd btn-lg"> 
      OK 
      <div class="ripple-container"></div> 
     </button> 
     </div> 
     </div> 
    </div> 
    </div> 

私は彼のクラスのプロパティCOL-MD-4 COL-SM-6 COL-MD-オフセット-4 COL-SM-オフセット-3を設定したいです。もっとダイナミックにすることはできますか？動的なクラスを設定するには、以下のような角度2の

Answer 1

使用ngClassプロパティ：

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element> 

登録コンポーネントテンプレート のようなあなたのテンプレートを変更...

ご登録コンポーネントの選択などで。他のコンポーネントテンプレートにregister-comp

@Input() public page: string; 

getClassByPageType(): string { 
if(this.page === 'page1'){ 
return 'col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3'; 
} else if(this.page === 'page2') { 
return 'col-md-2 col-sm-5 col-md-offset-6 col-sm-offset-4'; 
} 
return 'col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3'; // default 
} 

ngClass利用マニュアルについては

<div class='page1-comp'> 
<register-comp page='page1'></register-comp> 
</div> 

<div class='page2-comp'> 
    <register-comp page='page2'></register-comp> 
</div>