fix:<Linked list> linked list option selection scrolling page

Author: raj-rathod

src/app/components/NonprimitiveData/linear/linear-routing.module.ts

@@ -26,20 +26,6 @@ const routes: Routes = [
   },
   {
     path: 'linked-list', component: LinkedListComponent,
-    children:[
-      {
-        path: '', redirectTo:'single-linked-list', pathMatch:'full',
-      },
-      {
-        path: 'single-linked-list', component: SingleLinkedListComponent
-      },
-      {
-        path: 'double-linked-list', component: DoubleLinkedListComponent
-      },
-      {
-        path: 'circular-linked-list', component: CircularLinkedListComponent
-      }
-    ]
   }
 ];
 

src/app/components/NonprimitiveData/linear/linked-list/linked-list.component.html

@@ -7,19 +7,30 @@ <h1 class="text-center">Linked List</h1>
 
 
 <div class="d-flex mt-lg-5 mt-4 horizontal-scroll">
-    <div class="box p-lg-2 p-1 px-lg-3 px-2 btn me-lg-4 me-3 mb-2 linkedType" (click)="selectionOfType(0)">
+    <div [class]="step === 0 ?'box box-active p-lg-2 p-1 px-lg-3 px-2  tab me-lg-4 me-3 mb-2':'box p-lg-2 p-1 px-lg-3 px-2  tab me-lg-4 me-3 mb-2'"
+        (click)="selectionOfType(0)">
         <p class="m-0">Single Linked List</p>
     </div>
-    <div class="box p-lg-2 p-1 px-lg-3 px-2 btn me-lg-4 me-3 mb-2 linkedType" (click)="selectionOfType(1)">
+    <div [class]="step === 1 ?'box box-active p-lg-2 p-1 px-lg-3 px-2  tab me-lg-4 me-3 mb-2':'box p-lg-2 p-1 px-lg-3 px-2  tab me-lg-4 me-3 mb-2'"
+        (click)="selectionOfType(1)">
         <p class="m-0">Double Linked List</p>
     </div>
-    <div class="box p-lg-2 p-1 px-lg-3 px-2 btn me-lg-4 me-3 mb-2 linkedType" (click)="selectionOfType(2)">
+    <div [class]="step === 2 ?'box box-active p-lg-2 p-1 px-lg-3 px-2  tab me-lg-4 me-3 mb-2':'box p-lg-2 p-1 px-lg-3 px-2  tab me-lg-4 me-3 mb-2'"
+        (click)="selectionOfType(2)">
         <p class="m-0">Circular Linked List</p>
     </div>
 </div>
 <div class="mt-3">
-    <router-outlet></router-outlet>
+    <ng-container *ngIf="step === 0">
+        <app-single-linked-list></app-single-linked-list>
+    </ng-container>
+    <ng-container *ngIf="step === 1">
+        <app-double-linked-list></app-double-linked-list>
+    </ng-container>
+    <ng-container *ngIf="step === 2">
+        <app-circular-linked-list></app-circular-linked-list>
+    </ng-container>
 </div>
 <div class="mt-md-4 mt-3" [innerHtml]="linkedListMetaData.applications"></div>
 <div class="mt-md-4 mt-3" [innerHtml]="linkedListMetaData.advantage"></div>
-<div class="mt-md-4 mt-3" [innerHtml]="linkedListMetaData.disadvantage"></div>
+<div class="mt-md-4 mt-3" [innerHtml]="linkedListMetaData.disadvantage"></div>

src/app/components/NonprimitiveData/linear/linked-list/linked-list.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { linkedListMetaData } from 'src/app/core/data-structures/linear/linked-list/linked-list-meta-data';
 
@@ -7,7 +7,7 @@ import { linkedListMetaData } from 'src/app/core/data-structures/linear/linked-l
   templateUrl: './linked-list.component.html',
   styleUrls: ['./linked-list.component.css']
 })
-export class LinkedListComponent implements OnInit, AfterViewInit{
+export class LinkedListComponent implements OnInit{
 
   linkedListMetaData = linkedListMetaData;
   step = 0;
@@ -24,43 +24,20 @@ export class LinkedListComponent implements OnInit, AfterViewInit{
        }
      });
   }
-
-  ngAfterViewInit(): void {
-    this.selectionOfType(this.step);
-  }
-
-
   selectionOfType(index: number): void {
-    const typeRef = this.elRef.nativeElement.querySelectorAll('.linkedType');
-    for (let i = 0; i < typeRef.length; i++){
-      if(i === index){
-        typeRef[i].className = 'box box-active p-lg-2 p-1 px-lg-3 px-2 btn me-lg-4 me-3 mb-2 linkedType';
-        this.selectType(i);
-      }else{
-        typeRef[i].className = 'box p-lg-2 p-1 px-lg-3 px-2 btn me-lg-4 me-3 mb-2 linkedType';
-      }
-    }
+    this.step = index;
+    // const typeRef = this.elRef.nativeElement.querySelectorAll('.linkedType');
+    // for (let i = 0; i < typeRef.length; i++){
+    //   if(i === index){
+    //     typeRef[i].className = 'box box-active p-lg-2 p-1 px-lg-3 px-2 btn me-lg-4 me-3 mb-2 linkedType';
+    //     this.selectType(i);
+    //   }else{
+    //     typeRef[i].className = 'box p-lg-2 p-1 px-lg-3 px-2 btn me-lg-4 me-3 mb-2 linkedType';
+    //   }
+    // }
   }
 
-  selectType(index: number){
-    switch(index){
-      case 0:{
-        this.router.navigate(['/non-primitive/linear/linked-list/single-linked-list'],
-        {queryParams:{step:0}});
-        break;
-      }
-      case 1:{
-        this.router.navigate(['/non-primitive/linear/linked-list/double-linked-list'],
-        {queryParams:{step:1}});
-        break;
-      }
-      case 2:{
-        this.router.navigate(['/non-primitive/linear/linked-list/circular-linked-list'],
-        {queryParams:{step:2}});
-        break;
-      }
-    }
-  }
+  
 
 }