html - Angular Components Structure in Divs - Stack Overflow

admin管理员组

文章数量:1122846

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?

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?

• html
• angular
• angular-components
• code-splitting

Share Improve this question Follow edited Nov 22, 2024 at 0:14 Naren Murali 54.6k55 gold badges4040 silver badges7070 bronze badges asked Nov 21, 2024 at 11:41 thegreylukthegreyluk 1144 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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 {
 ...

Related Answer - Angular component default style css display block

本文标签： htmlAngular Components Structure in DivsStack Overflow