CSS changed due to the Angular "interpolation"

Question

I'm having a strange display of a page when I add an interpolation to generate the code I want (Angular).

static way : display ok ; when using the tag I created, it's not, as you can

see on this screenshot.

I use Bootstrap on node.js project with Angular. The code is :

  <ul id="listEvents" class="dropdown-menu dropdown-alerts" *ngIf="isMultipleEvents()">
    <app-event-item  *ngFor="let event of events"
    [hashtag] = "event.hashtag"></app-event-item>
      <li>
          <a href="#">
              <div>
                  <button type="button" class="btn btn-warning btn-xs">#SCS2018</button>
              </div>
          </a>
      </li>
      <li class="divider"></li>
      <li>
          <a href="#">
              <div>
                <button type="button" class="btn btn-warning btn-xs">#WKSH2019</button>
              </div>
          </a>
      </li>
      <li class="divider"></li>
      <li>
          <a class="text-center" href="#">
              <strong>Mes paramètres</strong>
              <i class="fa fa-angle-right"></i>
          </a>
      </li>
  </ul>

and the event-item compononent code is :

          <li>
          <a href="#">
              <div>
                  <button type="button" class="btn btn-warning btn-xs">{{ hashtag }}</button>
              </div>
          </a>
      </li>
      <li class="divider"></li>

When I look for the HTML generated in dev tools (Chrome), I see

ul > app-event-item > li > a > div > button

then

ul > li > a > div > button

for the statics one.

So the only difference is this level "app-event-item" that I created with Angular, but I don't understand why it change the way it look.