#3 Created TokenInceport too add Headers too the request..

src/app/TokenInterceptor.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpRequest,
+  HttpHandler,
+  HttpEvent,
+  HttpInterceptor
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+@Injectable()
+export class TokenInterceptor implements HttpInterceptor {
+
+  constructor() {}
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    request = request.clone({
+      setHeaders: {
+        'Ocp-Apim-Subscription-Key': '272101d76e92479c9762f658ecff0dc3'
+      }
+    });
+    return next.handle(request);
+  }
+}

src/app/app.component.ts

@@ -65,13 +65,13 @@ export class AppComponent {
   displayData: string[];
   dataSource = this.displayData;
 
-  constructor(private service: HttpService) {  }
+  constructor(private service: HttpService) { }
 
-  ngOnInit() {
-    this.elements = this.service.getCharacters();
+  async ngOnInit() {
+    this.elements = await this.service.getCharacters();
     console.log(this.elements);
-    this.jsonStringArray = Object.keys(this.elements).map(e => this.elements[e]);
-    this.displayedColumns = ['position', 'name', 'weight', 'symbol'];
+    // this.jsonStringArray = Object.keys(this.elements).map(e => this.elements[e]);
+    // this.displayedColumns = ['position', 'name', 'weight', 'symbol'];
     console.log(this.jsonStringArray);
     // for (let index = 0; index < this.jsonStringArray.length; index++) {
     //   const val = Object.keys(this.jsonStringArray).map(index => this.jsonStringArray[index]);

src/app/app.module.ts

@@ -18,7 +18,8 @@ import { MatSliderModule } from '@angular/material/slider';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 import { MatNativeDateModule, MatIconModule, MatToolbarModule, MatTableModule } from '@angular/material';
-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import {TokenInterceptor} from './TokenInterceptor';
 
 
 
@@ -46,7 +47,7 @@ const modules: any[] = [
 ];
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
   ],
   imports: [
     BrowserModule,
@@ -57,7 +58,12 @@ const modules: any[] = [
   exports: [
     modules
   ],
-  providers: [],
+  providers: [{
+    provide: HTTP_INTERCEPTORS,
+    useClass: TokenInterceptor,
+    multi: true
+  }
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/http.service.ts

@@ -1,22 +1,22 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-
-
-const headers = new HttpHeaders()
-  .set('Ocp-Apim-Subscription-Key', '272101d76e92479c9762f658ecff0dc3');
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 
 @Injectable({
   providedIn: 'root'
 })
 
+
 export class HttpService {
   constructor(private http: HttpClient) { }
+
   url = 'https://preview-demo-mm.azure-api.net/private/api/management/apis?';
 
-  getCharacters() {
-    return this
+  async getCharacters() {
+    await  this
       .http
-      .get(`${this.url}`, { headers });
+      .get(this.url).subscribe(data => {
+        return data;
+      });
   }
 }