ahmed elbarbary

ahmed elbarbary

  • NA
  • 1.6k
  • 278.4k

I need to access component when click link but not change UR

Dec 20 2019 8:04 PM
I work on web app done by angular 7
I need when click on any item on list on have router link on nvabar.component.html go to specified component on router link
without change URL .
navbar.component.html
  1. <div id="z2-2cols-leftpanel">  
  2. <ul class="z2-leftpanel-ullinks">  
  3. <li>  
  4. <a routerLink="/overview" class="active z2tabBtn" data-z2tab="overview_content">  
  5. <div class="z2iconfont icon-Basic-Info"></div>  
  6. <div class="ulllinks-text">Overview</div>  
  7. </a>  
  8. </li>  
  9. <li>  
  10. <a routerLink="/family" class="z2tabBtn" data-z2tab="family_content">  
  11. <div class="z2iconfont icon-Cross-Reference"></div>  
  12. <div class="ulllinks-text">Family</div>  
  13. </a>  
  14. </li>  
  15. <li>  
  16. </ul>  
  17. </div>  
in app-routing.module.ts
  1. { path: 'overview', component: OverviewComponent },  
  2. { path: 'family', component: FamilyComponent }  
on overview.component.ts
  1. import { CompanyService } from './../../service/company.service';  
  2. import { Component, OnInit } from '@angular/core';  
  3. import { PartDetailsService } from 'src/app/service/part-details.service';  
  4.   
  5.   
  6. @Component({  
  7. selector: 'app-overview',  
  8. templateUrl: './overview.component.html',  
  9. styleUrls: ['./overview.component.css']  
  10. })  
  11. export class OverviewComponent implements OnInit {  
  12.   
  13. public companyProfile;  
  14. constructor(public partDetailsService: PartDetailsService  
  15. public companyService: CompanyService) {  
  16. }  
  17.   
  18. ngOnInit() {  
  19. console.log("welcome overview component ");  
  20. }  
so I need when click on link overview on navbar.component.html
go to component overview and show welcome on console without change URL
so
How to do that please ?
current status is when click on link overview exist on navbar it go to overview component
but it change URL
what i need is when click overview link go to component overview but not change URL ?
Example
suppose i have URL localhost:4200/family
when click overview component go to overview component but not change URL to localhost:4200/overview meaning
link localhost:4200/family will be in URL although i click overview component and show message on console welcome overview

Answers (1)