Question 306655 in Html Question posted in
Some basic documentation can be found here.

Html – Angular Component after including changes behaviour

I want to have a div for documents next to my div for posts.

If I write my div for the documents in the file it does it correctly.

forum.component.html:

<div class="container">
  <div class="row">
    <!-- Post-div --> 
    <div class="col-lg-7 p-4">
      <!-- Creates new post -->
      <app-forum-post-create></app-forum-post-create>

      <!-- Userposts + Replies from different Users --> 
      @for (post of posts; track $index) {
        <app-forum-post [post]="post"></app-forum-post>
      }
    </div>

    <!-- Documents-div -->
    <div class="col-lg-5 p-4" style="background-color: red;">

    </div> 
  </div>
</div>

enter image description here

If I write my div as a component that I include it lands below the post-div:

forum.component.html

<div class="container">
  <div class="row">
    <!-- Post-div --> 
    <div class="col-lg-7 p-4">
      <!-- Creates new post -->
      <app-forum-post-create></app-forum-post-create>

      <!-- Userposts + Replies from different Users --> 
      @for (post of posts; track $index) {
        <app-forum-post [post]="post"></app-forum-post>
      }
    </div>

    <!-- Documents-div but included as a component -->
    <app-document-upload [document]=""></app-document-upload>
  
  </div>
</div>

enter image description here

The implementation for the document-component is:

document-upload.component.html

<div class="col-lg-5 p-4" style="background-color: red;">

</div>

so the same code. I do not understand the different behaviour, seemingly just the fact that I am including it changes the appearance although it is the same.

Tags:

2

Answers


  1. 0

    Have a look at the rendered DOM. When you put the div.col-lg-5 into a separate component, it is no longer a direct child element of div.row. The easiest solution would be, to keep it in forum.component.html.

    You could also set the class via HostBinding to the DocumentUploadComponent root element like this:

    @HostBinding('class') class = 'col-lg-5 p-4';

    You would also need to make sure that it’s a block element. Because Angular component root nodes are inline by default.

    Login or Signup to reply.
  2. 0 
    <div class="container">
  <div class="row">
   <!-- Post-div --> 
    <div class="col-lg-7 p-4">
      <!-- Creates new post -->
      <app-forum-post-create></app-forum-post-create>

      <!-- Userposts + Replies from different Users --> 
      @for (post of posts; track $index) {
      <app-forum-post [post]="post"></app-forum-post>
      }
    </div>

   <!-- Documents-div -->
   <div class="col-lg-5 p-4" style="background-color: red;">
     <!-- Documents-div but included as a component -->
     <app-document-upload [document]=""></app-document-upload>
   </div> 
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search