Issue
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>
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>
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.
Solution
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.
Answered By - Bastian Bräu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.