Added and configured countdown component and few other components in …

…home page

package.json

@@ -26,6 +26,7 @@
     "@angular/platform-browser": "~11.0.1",
     "@angular/platform-browser-dynamic": "~11.0.1",
     "@angular/router": "~11.0.1",
+    "ngx-countdown": "^11.0.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

src/app/app.module.ts

@@ -2,15 +2,20 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
+import { AppComponent } from './app.component';
+import { HomeComponent } from './pages/home/home.component';
+
+import { CountdownModule } from 'ngx-countdown';
+
 // Material module imports
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatButtonModule } from '@angular/material/button';
-
-import { HomeComponent } from './pages/home/home.component';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [AppComponent, HomeComponent],
@@ -21,6 +26,10 @@ import { HomeComponent } from './pages/home/home.component';
     MatToolbarModule,
     MatTabsModule,
     MatButtonModule,
+    MatInputModule,
+    MatFormFieldModule,
+    CountdownModule,
+    FormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/pages/home/home.component.html

@@ -1,4 +1,8 @@
-<mat-tab-group mat-align-tabs="center"  [(selectedIndex)]="selectedTabIndex" (selectedTabChange)="selectedTabChange($event.index)">
+<mat-tab-group
+  mat-align-tabs="center"
+  [(selectedIndex)]="selectedTabIndex"
+  (selectedTabChange)="selectedTabChange($event.index)"
+>
   <mat-tab label="1 minute"></mat-tab>
   <mat-tab label="3 minutes"></mat-tab>
   <mat-tab label="5 minutes"></mat-tab>
@@ -8,7 +12,28 @@
 </div>
 <div>
   <!-- Timer -->
+  <div>
+    <countdown
+      #countdown
+      [config]="config"
+      (event)="handleEvent($event)"
+    ></countdown>
+  </div>
   <!-- Score -->
+  <p>Score: {{score}}</p>
   <!-- Text -->
   <!-- Input box -->
+  <div>
+    <mat-form-field class="example-full-width">
+      <mat-label>Let's take the test</mat-label>
+      <textarea
+        matInput
+        placeholder="Start Typing"
+        cdkTextareaAutosize
+        cdkAutosizeMinRows="3"
+        cdkAutosizeMaxRows="3"
+        (change)="onStartTyping($event)"
+      ></textarea>
+    </mat-form-field>
+  </div>
 </div>

src/app/pages/home/home.component.ts

@@ -1,18 +1,31 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { CountdownComponent, CountdownEvent } from 'ngx-countdown';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
+  styleUrls: ['./home.component.scss'],
 })
 export class HomeComponent implements OnInit {
   selectedTabIndex = 0;
-
-  constructor() { }
+  @ViewChild('countdown', { static: false })
+  private countdown: CountdownComponent;
+  config = {
+    leftTime: 60,
+  };
+  score = 0;
+  constructor() {}
 
   ngOnInit(): void {
     // this.selectedTabIndex = 0;
+    // this.countdown.begin();
+  }
+  selectedTabChange(index: any): void {}
+  handleEvent(ev: CountdownEvent): void {
+    // ev.action === done
+    // disable input box
+    // debugger;
   }
-  selectedTabChange(index: any): void {
+  onStartTyping(ev: Event ): void {
   }
 }

tsconfig.json

@@ -24,6 +24,7 @@
   "angularCompilerOptions": {
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "strictTemplates": true,
+    "strictPropertyInitialization": false
   }
 }