CODEWITHSUNDEEP
javascriptangularangular12
Amel Selmane
Amel Selmane

Reputation: 35

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 :)

Upvotes: 1

Views: 1557

Answers (2)

Ingo B&#252;rk
Ingo B&#252;rk

Reputation: 20043

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.

Upvotes: 3

Antot
Antot

Reputation: 3964

To make it the "Angular way", the approach needs to be changed.

Supposing that you have a collection of device names (appareilNames) returned from your component:

public get deviceNames(): Array<string> { ... }

The appropriate tags structure can be achieved as follows:

<ul class="list-group">
  <li *ngFor="let deviceName of deviceNames"> <!-- iterate on each device name -->
    <app-appareil [appareilName]="deviceName"></app-appareil> <!-- use each name to create a component with it -->
  </li>
</ul>

Upvotes: 0

Related Questions