The bootstrap class does not apply to components in Angular

Question

I have several controls declared like this.

<div class="row">
  <div class="col-sm-12">
    <div>Caption</div>
    <input type="text" class="form-control">
  </div>
</div>

Trying to refactor my code, I introduced a component to encapsulate this particular behavior.

<div class="row">
  <app-textbox [caption]="'Caption'"></app-textbox>
</div>

The markup for a component is just a copy of the source code.

<div class="col-sm-12">
<!-- <div style="width:100%;"> -->
<!-- <div class=""> -->
  <div>{{data?.caption}}</div>
  <input type="text" class="form-control">
</div>

The problem that arises is that the class string does not extend to the component. It extends to the full width (since it is set to 12 , but this is not the width of the component containing the class string - it is smaller). Analyzing the markup in the browser console, I see that the only difference is that there is a tag for a custom control, introduced into the structure as follows:

div class= ""
- app-textbox
- - div class= "col-sm-12"
- -

" " :

div class= ""
- div class= "col-sm-12"
-

- .

<div class="row">
  <app-textbox [caption]="'Caption'" class="col-sm-12"></app-input-text>
</div>

, , , , . , - ( ) 15 ( , - , , - ). , .

/ .. , .

, app-textbox ?

Answer 1

css , index.html app.component.css.

( , Angular2 angular -cli, )

... , app.component.html. , . index.html