feat<Interview questions>

Author: raj-rathod

src/app/app-routing.module.ts

@@ -4,39 +4,65 @@ import { pageMetaData } from './core/meta-data/meta-data';
 import { DataStructureComponent } from './layout/data-structure/data-structure.component';
 import { HomeComponent } from './layout/home/home.component';
 import { PageNotFoundComponent } from './layout/page-not-found/page-not-found.component';
+import { DsaMainComponent } from './layout/dsa-main/dsa-main.component';
+import { InterviewQuestionComponent } from './layout/interview-question/interview-question.component';
 
 const routes: Routes = [
   {
-    path: '', 
-    component: HomeComponent,
-    data: pageMetaData.home
+    path:'',
+    component: DsaMainComponent,
+    children:[
+      {
+        path: '', 
+        component: HomeComponent,
+        data: pageMetaData.home
+      },
+      {
+        path: 'data-structure', 
+        component: DataStructureComponent,
+        data: pageMetaData.dataStructure
+      },
+      {
+        path: 'algorithm', 
+        data: pageMetaData.algorithms,
+        loadChildren: () =>
+        import('./components/Algorithms/algorithms.module').then(
+          (m) => m.AlgorithmsModule),
+      },
+    
+      {
+        path:'primitive',
+        data: pageMetaData.primitiveDataType,
+        loadChildren: () =>
+              import('./components/primitiveData/primitivedata.module').then(
+                (m) => m.PrimitiveDataModule),
+      },
+      {
+        path:'non-primitive',
+        data: pageMetaData.nonPrimitiveDataType,
+        loadChildren: () =>
+              import('./components/NonprimitiveData/non-primitiveData.module').then(
+                (m) => m.NonPrimitiveDataModule),
+      },
+    ]
   },
   {
-    path: 'data-structure', 
-    component: DataStructureComponent,
-    data: pageMetaData.dataStructure
-  },
-  {
-    path: 'algorithm', 
-    data: pageMetaData.algorithms,
-    loadChildren: () =>
-    import('./components/Algorithms/algorithms.module').then(
-      (m) => m.AlgorithmsModule),
-  },
-
-  {
-    path:'primitive',
-    data: pageMetaData.primitiveDataType,
-    loadChildren: () =>
-          import('./components/primitiveData/primitivedata.module').then(
-            (m) => m.PrimitiveDataModule),
-  },
-  {
-    path:'non-primitive',
-    data: pageMetaData.nonPrimitiveDataType,
-    loadChildren: () =>
-          import('./components/NonprimitiveData/non-primitiveData.module').then(
-            (m) => m.NonPrimitiveDataModule),
+    path:'interview-questions',
+    component: InterviewQuestionComponent,
+    children:[
+      {
+        path:'angular',
+        loadChildren: () => import('./components/Interview/angular/angular.module').then(
+          (m) => m.AngularModule
+        )
+      },
+      {
+        path:'javascript',
+        loadChildren: () => import('./components/Interview/javascript/javascript.module').then(
+          (m) => m.JavascriptModule
+        )
+      }
+    ]
   },
   {
     path: '**', 

src/app/app.component.css

@@ -1,8 +0,0 @@
-.margin-top{
-    margin-top: 90px;
-}
-@media(max-width:992px){
-    .margin-top{
-        margin-top: 70px;
-    }
-}

src/app/app.component.html

@@ -1,9 +1,3 @@
-<div class="container">
-    <app-navbar></app-navbar>
-    <div class="margin-top">
-        <app-breadcrumbs></app-breadcrumbs>
-        <router-outlet></router-outlet>
-    </div>
-</div>
-<app-previous-next-route></app-previous-next-route>
+<app-navbar></app-navbar>
+<router-outlet></router-outlet>
 <app-footer></app-footer>

src/app/app.module.ts

@@ -13,8 +13,8 @@ import { FormsModule } from '@angular/forms';
 import { PageNotFoundComponent } from './layout/page-not-found/page-not-found.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
-import { BreadcrumbsComponent } from './layout/breadcrumbs/breadcrumbs.component';
-import { PreviousNextRouteComponent } from './layout/previous-next-route/previous-next-route.component';
+import { DsaMainComponent } from './layout/dsa-main/dsa-main.component';
+import { InterviewQuestionComponent } from './layout/interview-question/interview-question.component';
 
 
 @NgModule({
@@ -26,8 +26,8 @@ import { PreviousNextRouteComponent } from './layout/previous-next-route/previou
     FooterComponent,
     NavbarComponent,
     PageNotFoundComponent,
-    BreadcrumbsComponent,
-    PreviousNextRouteComponent,
+    DsaMainComponent,
+    InterviewQuestionComponent,
   ],
   imports: [
     FormsModule,

src/app/components/Interview/angular/angular-questions/angular-questions.component.css

@@ -0,0 +1,7 @@
+.question-conationer{
+    min-height: 500px;
+    max-height: 500px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding-right: 10px;
+}

src/app/components/Interview/angular/angular-questions/angular-questions.component.html

@@ -0,0 +1,6 @@
+<app-breadcrumbs [selectedRoute]="currentQuestion-1" [routersData]="routesData"></app-breadcrumbs>
+<div class="chip mb-2">
+    {{currentQuestion}}/{{totalQuestion}}
+</div>
+<div class="question-conationer" [innerHTML]="question"></div>
+<app-previous-next-route [selectedRoute]="currentQuestion-1" [routersData]="routesData"></app-previous-next-route>

src/app/components/Interview/angular/angular-questions/angular-questions.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AngularQuestionsComponent } from './angular-questions.component';
+
+describe('AngularQuestionsComponent', () => {
+  let component: AngularQuestionsComponent;
+  let fixture: ComponentFixture<AngularQuestionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AngularQuestionsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AngularQuestionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/Interview/angular/angular-questions/angular-questions.component.ts

@@ -0,0 +1,53 @@
+import { AfterViewChecked, AfterViewInit, Component, OnInit } from '@angular/core';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { angularInterviewQuestion } from 'src/app/core/interview-questions/angular/angular-metadata';
+import { Helper } from 'src/app/helper/helper';
+import { HighlightService } from 'src/app/shared/services/highlight-syntax.service';
+
+@Component({
+  selector: 'app-angular-questions',
+  templateUrl: './angular-questions.component.html',
+  styleUrls: ['./angular-questions.component.css']
+})
+export class AngularQuestionsComponent implements OnInit, AfterViewInit, AfterViewChecked {
+questions = angularInterviewQuestion;
+slug:string  = '';
+totalQuestion = 0;
+currentQuestion = 0;
+routesData = Helper.setAllInterviewQuestionRoute('/interview-questions/angular/', this.questions);
+question = this.questions[0].answer;
+  constructor(
+    private highLightCode: HighlightService,
+    private route: ActivatedRoute,
+    private router: Router,
+  ) { }
+
+  ngOnInit(): void {
+    this.totalQuestion = this.questions.length;
+    this.route.paramMap.subscribe((params: ParamMap) => {
+      if(params.get('slug')){
+        this.slug = params.get('slug')!
+      }else{
+        this.slug = this.questions[0].slug;
+        this.router.navigate([`/interview-questions/angular/${this.slug}`]);
+      }
+      const index = this.questions.findIndex(question => question.slug === this.slug);
+      if(index>-1){
+        this.question  = this.questions[index].answer
+        this.currentQuestion = index+1;
+      }else{
+        this.router.navigate([`**`]);
+      }
+      
+    })
+  }
+
+  ngAfterViewInit(): void {
+    this.highLightCode.highlightAll();
+  }
+
+  ngAfterViewChecked(): void {
+    this.highLightCode.highlightAll();
+  }
+
+}

src/app/components/Interview/angular/angular-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AngularQuestionsComponent } from './angular-questions/angular-questions.component';
+
+const routes: Routes = [
+  {
+    path:'', component: AngularQuestionsComponent
+  },
+  {
+    path:':slug', component: AngularQuestionsComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AngularRoutingModule { }

src/app/components/Interview/angular/angular.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AngularRoutingModule } from './angular-routing.module';
+import { AngularQuestionsComponent } from './angular-questions/angular-questions.component';
+import { SharedModule } from 'src/app/shared/components/shared.module';
+
+
+@NgModule({
+  declarations: [
+    AngularQuestionsComponent
+  ],
+  imports: [
+    CommonModule,
+    AngularRoutingModule,
+    SharedModule
+  ]
+})
+export class AngularModule { }

src/app/components/Interview/css/css-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CssRoutingModule { }

src/app/components/Interview/css/css.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CssRoutingModule } from './css-routing.module';
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    CssRoutingModule
+  ]
+})
+export class CssModule { }

src/app/components/Interview/html5/html5-questions/html5-questions.component.css

@@ -0,0 +1 @@
+<p>html5-questions works!</p>

src/app/components/Interview/html5/html5-questions/html5-questions.component.html

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Html5QuestionsComponent } from './html5-questions.component';
+
+describe('Html5QuestionsComponent', () => {
+  let component: Html5QuestionsComponent;
+  let fixture: ComponentFixture<Html5QuestionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ Html5QuestionsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Html5QuestionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/Interview/html5/html5-questions/html5-questions.component.spec.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-html5-questions',
+  templateUrl: './html5-questions.component.html',
+  styleUrls: ['./html5-questions.component.css']
+})
+export class Html5QuestionsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/components/Interview/html5/html5-questions/html5-questions.component.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class Html5RoutingModule { }

src/app/components/Interview/html5/html5-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { Html5RoutingModule } from './html5-routing.module';
+import { Html5QuestionsComponent } from './html5-questions/html5-questions.component';
+
+
+@NgModule({
+  declarations: [
+    Html5QuestionsComponent
+  ],
+  imports: [
+    CommonModule,
+    Html5RoutingModule
+  ]
+})
+export class Html5Module { }

src/app/components/Interview/html5/html5.module.ts

@@ -0,0 +1,7 @@
+.question-conationer{
+    min-height: 500px;
+    max-height: 500px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding-right: 10px;
+}

src/app/components/Interview/javascript/javascript-questions/javascript-questions.component.css

@@ -0,0 +1,6 @@
+<app-breadcrumbs [selectedRoute]="currentQuestion-1" [routersData]="routesData"></app-breadcrumbs>
+<div class="chip mb-2">
+    {{currentQuestion}}/{{totalQuestion}}
+</div>
+<div class="question-conationer" [innerHTML]="question"></div>
+<app-previous-next-route [selectedRoute]="currentQuestion-1" [routersData]="routesData"></app-previous-next-route>