menu click working on report component but report details no

I work on angular 7 app contain two component

report

reportdetails

when i open my app main component is report component

report component have left side menu when click on reportid it go to reportdetail component and based on report id

it display data related to it on report detail component

my problem if you click any report id from menu on report detail component not working and

if click on menu on any report id on report component it working

Not working when click on any report from menu on report details component no effect happen so how to solve this issue please ?

menu have issue as below

class="row" style="display: block;float: left;margin-left:10px; margin-top: 2px;">
class="page-sidebar navbar-collapse collapse">
class="colsm12" id="">
"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">
class="active open">
"menu" >
class="rep.menuIcon">
{{rep.reportCategory}}
"let subrep of subreportlist" style="display:block;" id="submenu" style="padding-left:7px;">
"subrep.reportCategoryID === rep.reportCategoryID" class="wrapper" >
"['/pages/report/reportdetails']" [queryParams]="{id: subrep.reportID}" >
class="sideNav nav navbar">{{subrep.reportName}}

thank you for reply and help I have serveral questions I need answer for these questions if possible .

1- router outlet will be on pages component or report category component I put router outlet on report category component because it have main menu so are this correct or must put in pages component .

2- I take my two component out side my app(report category component and report details component)

and i can naviagte on menu and select new report on same web page without any issue

but not use children for root so are this meaning this is issue routing or what

const routes: Routes = [
{path:'',redirectTo: 'ReportCategoryComponent', pathMatch: 'full'},
{path:'report',component:ReportCategoryComponent},
{path:'reportdetails',component:ReportdetailsComponent},
{path:'reportdetails/:id',component:ReportdetailsComponent}
];

on menu link as below :

"/reportdetails?id={{subrep.reportID}}">
class="sideNav nav navbar">{{subrep.reportName}}

above sample work but in new project without using pages as children and without using pages component .

3- cursor mouse to anchor tag when navigate is convert to mouse arrow not hand as link

I use css and convert it to hand and success on that but nothing change i reach to same result

cannot navigate and when click to new report nothing change on url .

4- if the problem on menu code how to open for first time when select first report details

thank you for reply

how to check that can you more clear that

Look at your code and on dev tools to check if the path after open the report is the same from begning.

I something like this when you load in a different "root". When you open in another "path" the base report looses the correct path to the reports.

Look at your code and on dev tools to check if the path after open the report is the same from begning.

Best,

Jeff

I remove classes css and nothing changed I think issue on routing

this is current status

1-when open report component i can select any report from left side menu as below :

2- after select report from left side menu it go to component report details as below :

3- as above image when access specific report from left side menu when select another report to naviagete

as family obs conflict mouse pointer display as arrow not hand and nothing changed on url

only url for report id:3 still exist

meaning i can select from menu one report only but cannot navigate to navigate new record i must open

component report and relaod then select new report

can you please help me i spend 3 days without knowing what issue or what problem

app routing module as below

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

{path:'report',component:ReportcategoryComponent,children:[

{path:'reportdetails',component:ReportdetailsComponent},

{path:'reportdetails/:id',component:ReportdetailsComponent},

]},

What tests I would try:

YOU NEED TO KNOW WHERE THE REPORT IS GOING TO!

REMOVE class="wrapper":

REMOVE "*ngIf="subrep.reportCategoryID === rep.reportCategoryID"" FROM:

3) After clickin Spy the HTML With the Developer Tools from Google Chrome/Firefox and check

if your report is there.

If is there, check the the CSS that are blocking.

can you please help me

may be this problem from css or template

or this not related

Is this route correct? ['/pages/report/reportdetails']

yes and when click it reach to component and open data on reportdetails component

do you have the reportdetails

files with exactly this name?

yes

but my issue when click on menu on report details component nothing effect

yes it exist and working fine when click menu on report component

but on report details component when click nothing effect

Is this route correct? ['/pages/report/reportdetails']

do you have the reportdetails

files with exactly this name?

11 Replies

Know the answer? Post it — somebody with the same question will find it here.

ahmed elbarbary6y ago
thank you for reply and help I have serveral questions I need answer for these questions if possible .

1- router outlet will be on pages component or report category component I put router outlet on report category component because it have main menu so are this correct or must put in pages component .

2- I take my two component out side my app(report category component and report details component)

and i can naviagte on menu and select new report on same web page without any issue

but not use children for root so are this meaning this is issue routing or what
const routes: Routes = [
  {path:'',redirectTo: 'ReportCategoryComponent', pathMatch: 'full'},
  {path:'report',component:ReportCategoryComponent},
  {path:'reportdetails',component:ReportdetailsComponent},
  {path:'reportdetails/:id',component:ReportdetailsComponent}
];
on menu link as below :
"/reportdetails?id={{subrep.reportID}}">


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


above sample work but in new project without using pages as children and without using pages component .
3- cursor mouse to anchor tag when navigate is convert to mouse arrow not hand as link

I use css and convert it to hand and success on that but nothing change i reach to same result

cannot navigate and when click to new report nothing change on url .

4- if the problem on menu code how to open for first time when select first report details
ahmed elbarbary6y ago
thank you for reply
how to check that can you more clear that

Look at your code and on dev tools to check if the path after open the report is the same from begning.
Jefferson S. Motta6y ago
I something like this when you load in a different "root". When you open in another "path" the base report looses the correct path to the reports.

Look at your code and on dev tools to check if the path after open the report is the same from begning.

Best,

Jeff
ahmed elbarbary6y ago
I remove classes css and nothing changed I think issue on routing
this is current status
1-when open report component i can select any report from left side menu as below :
2- after select report from left side menu it go to component report details as below :
3- as above image when access specific report from left side menu when select another report to naviagete

as family obs conflict mouse pointer display as arrow not hand and nothing changed on url

only url for report id:3 still exist

meaning i can select from menu one report only but cannot navigate to navigate new record i must open

component report and relaod then select new report

can you please help me i spend 3 days without knowing what issue or what problem

app routing module as below

path: 'pages',component: PagesComponent , children: [{ path: '', component: HomeComponent },
{path:'report',component:ReportcategoryComponent,children:[
{path:'reportdetails',component:ReportdetailsComponent},
{path:'reportdetails/:id',component:ReportdetailsComponent},
]},
Jefferson S. Motta6y ago
What tests I would try:

YOU NEED TO KNOW WHERE THE REPORT IS GOING TO!
1)
REMOVE class="wrapper":
2)
REMOVE "*ngIf="subrep.reportCategoryID === rep.reportCategoryID"" FROM:
3) After clickin Spy the HTML With the Developer Tools from Google Chrome/Firefox and check
if your report is there.
If is there, check the the CSS that are blocking.
ahmed elbarbary6y ago
can you please help me
may be this problem from css or template
or this not related
ahmed elbarbary6y ago
still not open another page
I change
[routerLink]="['/pages/report/reportdetails']" [queryParams]="{id: subrep.reportID}" >
to
this
target='Test' [routerLink]="['/pages/report/reportdetails']" [queryParams]="{id: subrep.reportID}" >
and still not working
I ask one thing but not sure from this
may be router link exist on same page
so that link open only on report component
becuse it have router outlet
really not sure from that
Jefferson S. Motta6y ago
Try put a target, to verify is it opens in another page:

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

Let me know.
ahmed elbarbary6y ago
Is this route correct? ['/pages/report/reportdetails']
yes and when click it reach to component and open data on reportdetails component

do you have the reportdetails
files with exactly this name?

yes

but my issue when click on menu on report details component nothing effect
ahmed elbarbary6y ago
yes it exist and working fine when click menu on report component
but on report details component when click nothing effect
Jefferson S. Motta6y ago
Is this route correct? ['/pages/report/reportdetails']

do you have the reportdetails
files with exactly this name?