SharePoint Framework & Angular Elements : Connecting to your SharePoint data

Your first webpart now works but how cool would it be if you could leverage some data that exists in your Office 365 data? If you’re thinking like me, you’re at the right spot!

Angular Elements and SharePoint Framework are still in their developments. This codes is based on pre-release of Angular Elements and a very “rough” integration with the SharePoint Framework. I am still pushing those samples so you can start playing with the technology. Please don’t use any of this in production as of today. I will update the posts and code when better support will be offered by both Angular and SharePoint Framework.

This post is part of a series of post on integrating the SharePoint Framework with Angular Elements

• SharePoint Framework & Angular Elements : Building your first Web Part
• SharePoint Framework & Angular Elements : Connecting to your SharePoint data (this post)
• SharePoint Framework & Angular Elements : Mocking your data
• SharePoint Framework & Angular Elements : Using Google Material Design
• SharePoint Framework & Angular Elements : Using Office UI Fabric Core

Getting started

First of all, make sure you read the Building your first Web Part post to understand how to get things started and have a working Web Part!

Importing ZoneJS in your project

In that specific scenario, because of async nature of the calls you will make to SharePoint and to simplify the development experience, we will need to “embed” an important piece of Angular : ZoneJS. Everything can be done without (as it’s not a required piece anymore) but it’s easier to use it for demo purposes.

To include ZoneJS, you have to add it to packages.json, to the wc-shim.js and to the Custom Element you are building.

package.json

{
  //...
  "dependencies": {
    //...
    "zone.js": "0.8.18"
  }
  //...
}

wc-shim.js

import 'zone.js';

(function () {
  //...
})();

index.ts

//web components ES5 shim
import './../../../elements/wc-shim.js';
import { registerAsCustomElements } from '@angular/elements';
import { platformBrowser } from '@angular/platform-browser';

import { ListRest, ListRestModule } from './list-rest';
import { ListRestModuleNgFactory } from './list-rest.ngfactory';

registerAsCustomElements([ListRest], () =>
  platformBrowser().bootstrapModuleFactory(ListRestModuleNgFactory)
).catch((err) => console.log(err));

Passing the context to your webpart

Ensure you have an Input property in your Component that accepts a WebPartContext and you will be able to transfer your WebPart context directly in your Component. That will simplify a lot of the calls as the SPHttpClient takes care of some of the authentication challenges that exist in the SharePoint Framework.

list-rest.ts

//...
import { WebPartContext } from '@microsoft/sp-webpart-base';

@Component({
  //...
})
export class ListRest {
  //...
  @Input() context: WebPartContext;
  //...
}

//...

You will also need to change the way to render your Component in your Web Part as you will need to pass in a complex object that would bot be supported as a simple custom element property.

ListWebPart.ts

//...

export default class ListRestWebPart extends BaseClientSideWebPart<ListRest> {
  public render(): void {
    let ngElement = this.domElement.getElementsByTagName('list-rest')[0];

    if (ngElement) {
      this.domElement.removeChild(ngElement);
    }

    const ElementListRest = customElements.get('list-rest');
    const element = new ElementListRest();
    element.context = this.context;
    this.domElement.appendChild(element);
  }
}

Querying SharePoint in your Component

Now that your have access to the SPHttpClient within your component, the only missing piece is to discuss with the SharePoint REST APIs! In this sample, we are only highlighting the lists that exist in the current Site, but you can be very creative here!

list-rest.ts

import { Component, NgModule, Input, ViewEncapsulation } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { WebPartContext } from '@microsoft/sp-webpart-base';
import { SPHttpClient, HttpClientResponse, IGraphHttpClientOptions } from '@microsoft/sp-http';

@Component({
  selector: 'list-rest',
  templateUrl: './list-rest.html',
  styleUrls: ['./list-rest.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class ListRest {
  @Input() context: WebPartContext;
  public lists: Promise<any[]>;

  ngOnInit() {
    if (!this.context) {
      console.error('Please provide the context!');
      return;
    }

    this.lists = this.context.spHttpClient
      .get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists`, SPHttpClient.configurations.v1)
      .then((res) => res.json())
      .then((res) => res.value)
      .catch((err) => console.log(err));
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [ListRest],
  entryComponents: [ListRest],
})
export class ListRestModule {
  ngDoBootstrap() {}
}

Show your data asynchronously in your template

The only missing piece is to display the fetched data from SharePoint in your Angular Template. Use the *ngFor instruction combined with the | async option to load asynchronous data and let Angular handle it!

list-rest.html

<div class="helloWorld">
  <div class="container">
    <div class="row">
      <div class="column">
        <span class="title">Welcome to SharePoint!</span>
        <ul>
          <li *ngFor="let list of lists | async">{{ list.Title }}</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Run your webpart

Once your Web Part is ready, you can finally run it using gulp serve and see the result directly in your SharePoint Workbench!

Enjoy!

Now that your webpart works, I’ll let you play around and explore the different SharePoint REST APIs that you can leverage in those scenarios!

Resources

• My personal repo with all SharePoint Framework + Angular Elements WebParts