Angular 18 with Bootstrap coming from React: how to style since the host component is rendered

I'm learning Angular 18 while I already know React. I have a "pretty big" HTML file, which I would like to split. Let's take this pseudo and minified example:

# HTML
<ul>
<li>Hello</li>
<li>World</li>
<li>This is Angular</li>
</ul>

# simple CSS
ul {
display: flex;
}



Now let's suppose I want to create a new component which is called <list-comp> which contains all the three <li> elements, like:

<ul>
<list-comp />
</ul>


The flexbox style I wrote is broken, because the <list-comp> selector is rendered, therefore the flex-box is applied to the <list-comp> element and not to the <li>. In React I used the fragment, and in Angular I just read about <ng-container>, but after a couple of tries it seemd to not working properly.

I know that seems a non-sense example, but just take it as a minified one. In this project I have to extract for example a row of a table, rendering it in two different ways, therefore I wanted to use two different component for each one, but then, the style is broken.

Anyone can clarify how to "think" about it? I would appreciate a solution, but most an explaination to grasp the concept. I have already read style-guide and docs, I also googled, but I am not satisfied.

Continue reading...