add progress bar

package.json

@@ -21,6 +21,8 @@
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
+    "@ngx-progressbar/core": "^4.1.1",
+    "@ngx-progressbar/http": "^4.1.1",
     "bootstrap": "^4.0.0",
     "core-js": "^2.4.1",
     "rxjs": "^5.5.6",

src/app/app.component.html

@@ -9,4 +9,6 @@
         <a href="{{links[i]}}">{{item}}</a>
     </li>
   </ul>
-</div>
+</div>
+
+<ng-progress [color]="'green'"  [thick]="true" [spinner]="false" ></ng-progress>

src/app/app.component.ts

@@ -1,22 +1,24 @@
-import { Component } from '@angular/core';
+import { Component,  OnInit } from '@angular/core';
 import { WikipediaSearchService } from "./wikipedia-search.service";
 import { Subject } from "rxjs/Subject";
+import { NgProgress } from '@ngx-progressbar/core';
 
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
 import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/do';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent  implements OnInit {
   items:Array<string>;
   links:Array<string>;
   term$ = new Subject<string>();
 
-  constructor(private service:WikipediaSearchService){
+  constructor(private service:WikipediaSearchService, public progress: NgProgress){
     this.term$
         .debounceTime(400)
         .distinctUntilChanged()
@@ -27,10 +29,12 @@ export class AppComponent {
         ]);
   }
 
-  search(term: string){
-    this.service.search(term).subscribe(results => [
-      this.items= results[1],
-      this.links= results[3]
-    ])
+  ngOnInit(){
+    this.progress.start();
+  }
+
+  ksekina(){
+    this.progress.start();
   }
 }
+

src/app/app.module.ts

@@ -1,6 +1,8 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
+import { NgProgressModule } from '@ngx-progressbar/core';
+import { NgProgressHttpModule } from '@ngx-progressbar/http';
 
 
 import { AppComponent } from './app.component';
@@ -13,7 +15,9 @@ import { WikipediaSearchService } from "./wikipedia-search.service";
   ],
   imports: [
     BrowserModule,
-    HttpClientModule
+    HttpClientModule,
+    NgProgressModule.forRoot(),
+    NgProgressHttpModule
   ],
   providers: [WikipediaSearchService],
   bootstrap: [AppComponent]