How to remove component name from DOM in angular 6?

Question

Angular

Hello.
I want to create a normal menu where the parent < ul > and child < li > are different components. But angular inserts the child's name as a tag in the dom structure and because of this, the styles do not work correctly.
That is, the structure is not like this:

<ul>
<li>..</li>
<li>..</li>
</ul>

But this one:

<ul>
<app-menu-item>
<li>..</li>
</app-menu-item>
<app-menu-item>
<li>..</li>
</app-menu-item>
</ul>

Parent component app-sidebar:

<div class="aside-container">
    <div class="aside-title">Title Sidebar</div>
    <ul class="aside-menu">
        <app-menu-item *ngFor="let category of categories" [category]="category"></app-menu-item> // Дочерний компонент
    </ul>
</div>

Child component app-menu-item:

<li>
    <a routerLink="/test/{{ category.id }}">{{ category.name }}</a>
    <ul *ngIf="category.children">
        <app-menu-item *ngFor="let category of category.children" [category]="category"></app-menu-item>
    </ul>
</li>

How can I remove the name of the component so that the structure is like this:

<div _ngcontent-c3="" class="aside-container">
<div _ngcontent-c3="" class="aside-title">Title Sidebar</div>
<ul _ngcontent-c3="" class="aside-menu">
<!--Без имени компонента-->
<li _ngcontent-c4="">
<a _ngcontent-c4="" ng-reflect-router-link="/test/1" href="/test/1">Category 1</a>
</li>
<!--Без имени компонента-->
</ul>
</div>

Thanks

Answer 1

Do this if you like:

<li>
    <a routerLink="/test/{{ category.id }}">{{ category.name }}</a>
    <ul *ngIf="category.children">
        <li *ngFor="let category of category.children">
          <app-menu-item [category]="category"></app-menu-item>
        </li>
    </ul>
</li>

Answer 2

Some perversion. Why bind styles to li if you can bind styles to the components themselves