1

I work on angular 7 app I face issue my Issue is cannot navigate on

left side menu.I can select only one report from left side menu but cannot navigate

until I reload component report category meaning must go main menu to open new report.

report category component :

<div class="row" style="display: block;float: left;margin-left:10px; margin-top: 2px;">  
    <div class="page-sidebar navbar-collapse collapse">  
    <nav class="colsm12" id="">  
            <ul *ngFor="let rep of reportlist" class="accordion"  style="margin-top:2px;"  class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">  

                    <li class="active open">  
                        <a  id="menu" >  
                            <i class="rep.menuIcon"></i>  
                            <span >{{rep.reportCategory}}</span>  

                        </a>  
                        <ul *ngFor="let subrep of subreportlist"  style="display:block;" id="submenu" style="padding-left:7px;">  


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


                              <a [routerLink]="['/pages/report/reportdetails']" [queryParams]="{id: subrep.reportID}" >  


                                            <span class="sideNav nav navbar">{{subrep.reportName}}</span>  

                                        </a>  

                            </div>  



                        </ul>  



            </ul>  
        </nav>  
        </div>  
    </div>

    <div class="col-12">  
        <router-outlet></router-outlet>  
        </div> 

app routing module

path: 'pages',component: PagesComponent , children: [{ path: '', component: HomeComponent },

{path:'report',component:ReportcategoryComponent,children:[
{path:'reportdetails',component:ReportdetailsComponent},
{path:'reportdetails/:id',component:ReportdetailsComponent},
]},

Image for problem

when navigate from any report from left side above nothing change and not go to related report details report .

so How to solve navigation new report Issue please ?

ahmed barbary
  • 628
  • 6
  • 21

1 Answers1

0

on router outlet I remove class bootstarp from router outlet

<div class="col-12">  
        <router-outlet></router-outlet>  
        </div> 

when remove class="col-12" from router outlet it working without any issues

ahmed barbary
  • 628
  • 6
  • 21