When display component reportdetails it display below menu?

1

second component - table html display below menu but i need it display on right of menu .

I work on angular 7 and I have two components

first component is report component contain on left side menu and it is be router outlet on app.component

second component is table html exist on reportdetails component and generated when click link menu .

first component report contain menu

<p>report-category works!</p>

<table *ngFor="let rep of reportlist">

<tr>



<td>{{rep.reportCategory}}</td>

</tr>

<tr *ngFor="let subrep of subreportlist">

<div *ngIf="subrep.reportCategoryID === rep.reportCategoryID">



<a href="/reportdetails?id={{subrep.reportID}}">



<i class="{{subrep.IconClass}}"></i>

<span class="title">{{subrep.reportName}}</span>

</a>

</div>



</tr>



</table>

second is report component contain table that display below menu and this is wrong

the correct i need is to display right of menu as picture below

reportdetails works!

<p>reportdetails works!</p>

<div>
<table class="table table-hover" > 
<thead> 
<tr>

<th>regulation</th> 
</tr> 
</thead> 
<tbody> 
<tr *ngFor="let rep of reportdetailslist">
<td>{{rep.regulation}}</td> 
</tr>



</tbody> 
</table> 
<p>reportdetails works!</p>

<div>

<table class="table table-hover" >

<thead>

<tr>



<th>regulation</th>

</tr>

screenerror
screenerror1366×768 18.1 KB

2

Based on the code you’ve provided and the screenshot it seems like you want your second component be next to the first component.

For doing that you need to have the second component’s selector (directive) where your first component selector is.

I am guessing your first component is inside of app.component.html and the second one should be there as well.

If there’s still some confusion please share your app.component.html and we’ll figure it out :wink: