Merge pull request #69 from raj-rathod/rajesh

Rajesh

Author: raj-rathod

src/app/components/NonprimitiveData/linear/arrays/array/array.component.html

@@ -6,19 +6,25 @@ <h1 class="text-center">Array</h1>
 <div class="mt-md-4 mt-3">
     <div class="row">
         <div class="col-6 pe-0">
-           <div class="btn-bg p-lg-3 p-2 rounded-start tab arraytab " (click)="tabChange(0)">
+           <div [class]=" state === 0 ? 'btn-bg p-lg-3 p-2 rounded-start tab':'btn-bg-unactive p-lg-3 p-2 rounded-start tab'" 
+           (click)="tabChange(0)">
                <p class='text-center m-0'>1D-Array</p>
            </div>
         </div>
         <div class="col-6 ps-0">
-            <div class="btn-bg-unactive p-lg-3 p-2 rounded-end tab arraytab" (click)="tabChange(1)">
+            <div [class]=" state === 1 ? 'btn-bg p-lg-3 p-2 rounded-end tab':'btn-bg-unactive p-lg-3 p-2 rounded-end tab'" (click)="tabChange(1)">
                 <p class='text-center m-0'>2D-Array</p>
             </div>
         </div>
     </div>
 </div>
 <div class="my-4">
-    <router-outlet></router-outlet>
+    <ng-container *ngIf="state === 0">
+     <app-one-dimension></app-one-dimension>
+    </ng-container>
+    <ng-container *ngIf="state === 1">
+        <app-two-dimension></app-two-dimension>
+    </ng-container> 
 </div>
 <div class="mt-md-4 mt-3" [innerHtml]="arrayMetaData.algorithms"></div>
 <div class="mt-md-4 mt-3" [innerHtml]="arrayMetaData.applications"></div>

src/app/components/NonprimitiveData/linear/arrays/array/array.component.ts

@@ -1,49 +1,22 @@
-import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component,  OnInit } from '@angular/core';
 import { arrayData } from 'src/app/core/data-structures/linear/array/array-meta-data';
 
 @Component({
   selector: 'app-array',
   templateUrl: './array.component.html',
   styleUrls: ['./array.component.css']
 })
-export class ArrayComponent implements OnInit, AfterViewInit {
+export class ArrayComponent implements OnInit {
   state = 0;
   arrayMetaData = arrayData;
   constructor(
-    private router: Router,
-    private elRef: ElementRef
   ) { }
 
   ngOnInit(): void {
-    if(this.router.routerState.snapshot.url.split('/')[4] === 'two-dimension'){
-      this.state = 1;
-    }else{
-      this.state = 0;
-    }
-  }
-  ngAfterViewInit(): void {
-     this.tabChange(this.state);
+  
   }
   tabChange(index: number): void {
-    const tabRef = this.elRef.nativeElement.querySelectorAll('.arraytab');
-    for (let i = 0; i < tabRef.length; i++) {
-      if(index === i){
-        if(index === 0){
-          tabRef[i].className = 'btn-bg p-lg-3 p-2 rounded-start tab arraytab';
-          this.router.navigate(['/non-primitive/linear/array/one-dimension']);
-        }else{
-          tabRef[i].className = 'btn-bg p-lg-3 p-2 rounded-end tab arraytab';
-          this.router.navigate(['/non-primitive/linear/array/two-dimension']);
-        }
-      }else{
-        if(index !== 0){
-          tabRef[i].className = 'btn-bg-unactive p-lg-3 p-2 rounded-start tab arraytab';
-        }else{
-          tabRef[i].className = 'btn-bg-unactive p-lg-3 p-2 rounded-end tab arraytab';
-        }
-      }
-    }
+    this.state = index;
   }
 
 }