[spfx-angular] Http request exemple

AngularAppWebPart.ts

import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './AngularAppWebPart.module.scss';
import * as strings from 'AngularAppWebPartStrings';

//Angular deps
import 'reflect-metadata';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app/app.module';
require('zone.js'); 

export interface IAngularAppWebPartProps {
  description: string;
}

export default class AngularAppWebPart extends BaseClientSideWebPart<IAngularAppWebPartProps> {

  public render(): void {
    window['webPartContext']=this.context;
    this.domElement.innerHTML = `<app-root></app-root>`;
    platformBrowserDynamic().bootstrapModule(AppModule);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Environment, EnvironmentType } from '@microsoft/sp-core-library';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import IWebPartContext from '@microsoft/sp-webpart-base/lib/core/IWebPartContext';

import { MockHttpClient } from './MockHttpClient';

  
@Component({
  selector: 'app-root',
  template: `
      <div>
          <h1>Angular App Works!</h1>
          <ul>
              <li *ngFor="let item of items">
                  {{item.Title}}
              </li>
          </ul>
      </div>
  `
})

export class AppComponent implements OnInit {
  public items: ISPList[];
  public context: IWebPartContext;

  constructor() {}

  public ngOnInit() {
    this.context = window["webPartContext"];
    this._renderListAsync();
  }

  private _renderListAsync(): void {
    if (Environment.type === EnvironmentType.Local) {
      // Local environment
      this._getMockListData().then((response) => {
        this.items = response.value;
      });
    } else if (Environment.type == EnvironmentType.SharePoint ||
      Environment.type == EnvironmentType.ClassicSharePoint) {
      // Sharepoint environment
      this._getListData()
        .then((response) => {
          this.items = response.value;
        });
    }
  }

  private _getListData(): Promise < ISPLists > {
    return this.context.spHttpClient.get(
        this.context.pageContext.web.absoluteUrl + `/_api/Web/Lists(guid'16ddf3c3-4cdc-4b4d-b1a3-45269158b4ac')/items`,
        SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse) => {
        return response.json();
      });
  }

  private _getMockListData(): Promise < ISPLists > {
    return MockHttpClient.get()
      .then((data: ISPList[]) => {
        const listData: ISPLists = {
          value: data
        };
        return listData;
      }) as Promise < ISPLists > ;

  }
}

export interface ISPList {
  Title: string;
  Id: string;
}

export interface ISPLists {
  value: ISPList[];
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

MockHttpClient.ts

import {
  ISPLists,
  ISPList
} from './app.component';

export class MockHttpClient {
  private static _items: ISPList[] = [{
    Title: "Plop Mock 1",
    Id: "1"
  }, {
    Title: "Plop Mock 2",
    Id: "2"
    },{
    Title: "Plop Mock 3",
    Id: "3"
  },{
    Title: "Plop Mock 4",
    Id: "4"
  }];

  public static get(): Promise<ISPList[]>{
    return new Promise<ISPList[]>((resolve)=>{
      resolve(MockHttpClient._items);
    });
  }
}