I am questioning myself of whether or not to structure my Angular components in sub divs, to make the html better.
I do have a main page and a overview component. Is it good practices in Angular to move this component inside a div tag in the HTML file of the main page?
This is the main page HTML:
<div>
<app-overview />
</div>
This is the component HTML:
<div class="container">
<div class="headline">
<h2>...</h2>
<div class="form-button-container"></div>
</div>
<div class="objects">
...
<!-- objects -->
</div>
</div>
<!-- </div> -->
I was asking myself if the div component of the main page in Angular can be left out as well? Is this a worse solution?
There is no best practices for such things, you can just create your component using ng g c --display-block and it will be the same as the div element, so it can be the wrapper of the contents.
If you want to transform your existing component, then use the :host selector, to make it display: block.
@Component({
...
styles: [`:host: display: block`]
...
})
export class SomeComponent {
...