How to hide custom Angular 12 selector in browser view

I’m learning Angular 12 and I have some issues about the framework operation. I’ve created a new project, added Bootstrap 5 and created some components. When I nest a component inside another like this :

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h2>Mes appareils</h2>
      <ul class="list-group">
        <app-appareil [appareilName]="appareilOne"></app-appareil>
        <app-appareil [appareilName]="appareilTwo"></app-appareil>
        <app-appareil [appareilName]="appareilThree"></app-appareil>
      </ul>
    </div>
  </div>
</div>

I don’t understand why I still see the custom selectors in the browser inspector view : Angular browser view

It breaks several things in my Boostrap style.

Did you know if it’s possible to hide/remove these custom components of my browser view to get in this case only the <li> tags directly inside the <ul> instead of these <app-appareil> ?

Thanks 🙂

Answer

Change

@Component({
    selector: "app-appareil"
})

to

@Component({
    selector: "li[appAppareil]"
})

and then use it as

  <ul class="list-group">
    <li appAppareil [appareilName]="appareilOne"></li>
  </ul>

By using an attribute selector we can avoid the wrapping component tag (which you cannot “remove”), and we preserve semantics of the DOM itself.

Likely to get better semantics you’d want to make further changes and use content projection, but that’s unclear from the limited information and beyond the scope of the question anyway.