clean code

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

@@ -4,28 +4,31 @@
     <div class="blue-bar"></div>
     <div class="metrics-txt">Better with a team</div>
   </div>
-  @if (paramsId) {
+  @if (currentUserId) {
   <div
     class="contact-details"
     [ngClass]="{
-      'animation-coming-in': paramsId
+      'animation-coming-in': currentUserId
     }"
   >
     <div class="header">
       <div
         class="circle"
         [ngStyle]="{
-          'background-color': userService.displayUserDetails(paramsId, 'color')
+          'background-color': userService.displayUserDetails(
+            currentUserId,
+            'color'
+          )
         }"
       >
         <div class="initials">
-          {{ userService.displayUserDetails(paramsId, "initials") }}
+          {{ userService.displayUserDetails(currentUserId, "initials") }}
         </div>
       </div>
       <div class="details">
         <div class="name">
-          {{ userService.displayUserDetails(paramsId, "firstName") }}
-          {{ userService.displayUserDetails(paramsId, "lastName") }}
+          {{ userService.displayUserDetails(currentUserId, "firstName") }}
+          {{ userService.displayUserDetails(currentUserId, "lastName") }}
         </div>
         <div class="btns">
           <div class="btn">
@@ -43,12 +46,20 @@
       <div class="headline">Contact Information</div>
       <div class="info">
         <p>Email:</p>
-        <a [href]="'mail:' + userService.displayUserDetails(paramsId, 'email')">
-          {{ userService.displayUserDetails(paramsId, "email") }}
+        <a
+          [href]="
+            'mail:' + userService.displayUserDetails(currentUserId, 'email')
+          "
+        >
+          {{ userService.displayUserDetails(currentUserId, "email") }}
         </a>
         <p>Phone:</p>
-        <a [href]="'tel:' + userService.displayUserDetails(paramsId, 'phone')">
-          {{ userService.displayUserDetails(paramsId, "phone") }}
+        <a
+          [href]="
+            'tel:' + userService.displayUserDetails(currentUserId, 'phone')
+          "
+        >
+          {{ userService.displayUserDetails(currentUserId, "phone") }}
         </a>
       </div>
     </div>

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

@@ -12,7 +12,7 @@ import { ContactsComponent } from '../contacts.component';
   styleUrl: './contact-detail.component.scss',
 })
 export class ContactDetailComponent {
-  @Input() paramsId: string = '';
+  @Input() currentUserId: string = '';
 
   constructor(public userService: UserService) {}
 }

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

@@ -68,5 +68,5 @@
       } }
     </div>
   </div>
-  <app-contact-detail [paramsId]="paramsId"></app-contact-detail>
+  <app-contact-detail [currentUserId]="currentUserId"></app-contact-detail>
 </section>

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

@@ -16,7 +16,7 @@ export class ContactsComponent {
   allUsers: User[] = [];
   usersFirstLetter: string[] = [];
   usersByFirstLetter: { [key: string]: string[] } = {};
-  paramsId: string = '';
+  currentUserId: string = '';
 
   constructor(public userService: UserService, private route: ActivatedRoute) {
     this.userService.subUserList().subscribe(() => {
@@ -34,7 +34,7 @@ export class ContactsComponent {
   routeUserId() {
     if (this.route.params.subscribe()) {
       this.route.params.subscribe((params) => {
-        this.paramsId = params['id'];
+        this.currentUserId = params['id'];
       });
     }
   }