open user details without routing

src/app/app.routes.ts

@@ -29,7 +29,6 @@ export const routes: Routes = [
   { path: 'task/:id', component: TaskOverlayComponent },
   { path: 'task-edit/:id', component: TaskEditOverlayComponent },
   { path: 'contacts', component: ContactsComponent },
-  { path: 'contacts/:id', component: ContactsComponent },
   { path: 'help', component: HelpComponent },
   { path: 'imprint', component: ImprintComponent },
   { path: 'privacy-policy', component: PrivacyPolicyComponent },

src/app/components/contacts/contact-detail/contact-detail.component.ts

@@ -32,7 +32,7 @@ export class ContactDetailComponent {
   ) {}
 
   closeUserDetails() {
-    this.router.navigate(['contacts']);
+    this.sharedService.currentUserId = '';
   }
 
   checkUserData(userId: string) {

src/app/components/contacts/contacts.component.html

@@ -1,7 +1,9 @@
 <section>
   <div
     class="left-frame"
-    [ngClass]="{ 'd-none': !showAllUsers && currentUserId != undefined }"
+    [ngClass]="{
+      'd-none': !showAllUsers && sharedService.currentUserId != undefined
+    }"
   >
     <button class="btn-new" type="submit" (click)="openNewContactDialog()">
       <div class="btn-inside">
@@ -20,9 +22,9 @@
       index = $index) {
       <div
         class="contact"
-        routerLink="/contacts/{{ user.id }}"
+        (click)="showUserId(user.id)"
         [ngClass]="{
-          'contact-active': currentUserId === user.id
+          'contact-active': sharedService.currentUserId === user.id
         }"
       >
         <div
@@ -63,8 +65,10 @@
   </div>
   <div class="right-frame">
     <app-contact-detail
-      [ngClass]="{ 'd-none': !showAllUsers && currentUserId == undefined }"
+      [ngClass]="{
-      [currentUserId]="currentUserId"
+        'd-none': !showAllUsers && sharedService.currentUserId == undefined
+      }"
+      [currentUserId]="sharedService.currentUserId"
     ></app-contact-detail>
   </div>
 </section>

src/app/components/contacts/contacts.component.ts

@@ -19,31 +19,24 @@ export class ContactsComponent {
   usersFirstLetter: string[] = [];
   usersByFirstLetter: { [key: string]: string[] } = {};
   showAllUsers!: boolean;
-  currentUserId: string = '';
 
   constructor(
     public firebaseService: FirebaseService,
     private route: ActivatedRoute,
-    private sharedService: SharedService
+    public sharedService: SharedService
   ) {}
 
   ngOnInit(): void {
-    this.routeUserId();
     this.onResize();
   }
 
-  routeUserId() {
+  showUserId(userId: string = '') {
-    if (this.route.params.subscribe()) {
+    this.sharedService.currentUserId = userId;
-      this.route.params.subscribe((params) => {
-        this.currentUserId = params['id'];
-        this.sharedService.currentUserId = params['id'];
-      });
-    }
   }
 
   @HostListener('window:resize', ['$event'])
   onResize() {
-    if (window.innerWidth <= 1150 && this.currentUserId != '') {
+    if (window.innerWidth <= 1150 && this.sharedService.currentUserId != '') {
       this.showAllUsers = false;
     } else {
       this.showAllUsers = true;