Added dynamic loading for the title

package.json

@@ -24,7 +24,7 @@
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.803.24",
+    "@angular-devkit/build-angular": "^0.803.25",
     "@angular/cli": "~8.2.2",
     "@angular/compiler-cli": "~8.2.2",
     "@angular/language-service": "~8.2.2",

src/app/app.component.html

@@ -37,10 +37,4 @@ <h1 class="timer-text">{{time}}</h1>
             </div>
         </div>
     </div>
-</div>
-
-
-
-
-<!-- 
-<router-outlet></router-outlet> -->
+</div>

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-
+import { Title } from '@angular/platform-browser';
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
@@ -23,6 +23,12 @@ export class AppComponent {
     timeLeft: number = this.focusLength * 60;
     interval;
 
+    public constructor(private titleService: Title ) { }
+
+    public setTitle(newTitle: string) {
+
+      this.titleService.setTitle( newTitle );
+    }
     focusSelected() {
         this.focus = true;
         this.shortBreak = false;
@@ -73,6 +79,7 @@ export class AppComponent {
                 } else {
                     this.time += s;
                 }
+                this.setTitle("TaskFocus (" + this.time + ")"); //Update the Document Title in Browser
             } else {
                 this.numFocus += 1;
                 this.startBreak();
@@ -87,6 +94,8 @@ export class AppComponent {
     startBreak() {
         if (this.numFocus % 4 === 0) {
             this.longBreakSelected();
+        } else {
+            this.shortBreakSelected();
         }
     }