SPFx Webpart With Angular Elements

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { SpFxAngular9WebPartComponent } from './sp-fx-angular9-web-part/sp-fx-angular9-web-part.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    SpFxAngular9WebPartComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  entryComponents: [SpFxAngular9WebPartComponent]
})
export class AppModule {
  constructor(private injector: Injector) {}
  ngDoBootstrap() {
    const el = createCustomElement(SpFxAngular9WebPartComponent, { injector: this.injector });
    customElements.define('app-sp-fx-angular9-web-part', el);
  }
}

app.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { ListItems } from '../models/listItems.model';
import { map, tap, catchError } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class AppService {
  private BASE_URL = 'https://vtsp.sharepoint.com/';
  constructor(private httpClient: HttpClient) {}
  setAPIUrl(url: string) {
    this.BASE_URL = url || this.BASE_URL;
  }
  getListItems() {
    return this.httpClient
      .get<any>(`${this.BASE_URL}/_api/web/lists/getbytitle('React')/items?$select=Id,Title`)
      .pipe(map(response => response.value as ListItems[]))
      .toPromise();
  }
}

[WebpartName].component.ts

import { Component, Input, OnInit, ViewEncapsulation, Output, EventEmitter, OnDestroy } from '@angular/core';
import { ListItems } from '../models/listItems.model';
import { AppService } from '../services/app.service';
@Component({
  selector: 'app-sp-fx-angular9-web-part',
  templateUrl: './sp-fx-angular9-web-part.component.html',
  styleUrls: ['./sp-fx-angular9-web-part.component.scss'],
  encapsulation: ViewEncapsulation.Emulated
})
export class SpFxAngular9WebPartComponent implements OnInit {
  @Input()
  public set siteurl(url: string) {
    this.appService.setAPIUrl(url);
  }
  listItems: ListItems[];
  constructor(private appService: AppService) {}
  ngOnInit() {
    this.appService.getListItems().then(listItems => this.listItems = listItems);
  }
}

[WebpartName].component.html

<div class="col-md-8">
  <div class="card">
    <div class="card-body">
      <h3>List Items</h3>
      <table class="table">
        <thead>
          <tr>
            <th>Id</th>
            <th>Title</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let listItem of listItems">
            <td scope="row">{{ listItem.Id }}</td>
            <td scope="row">{{ listItem.Title }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Bundle Angular elements

To use angular elements in the SPFx webpart we need to bundle it in a js file so we will execute the below command.

npm run bundle

This command generates Angular application bundles and styles.css and after that combines all the JS files into a bundle.js file.

Using SPFx Webpart With Angular Elements

Now we will import the styles.css file in our spfx webpartafter bundle.js statement in our webpart.ts file as below.

require('../../../node_modules/angular-elements/dist/AngularElements/styles.css');

and then we will update the render method.

Here <app-sp-fx-angular9-web-part> is the custom element, which we have created with Angular. We will add this custom element tag in DOM to render the Angular component in the web part.

public render(): void {
  const siteUrl = this.context.pageContext.web.absoluteUrl;
  this.domElement.innerHTML = `<app-sp-fx-angular9-web-part siteUrl="${siteUrl}"></app-sp-fx-angular9-web-part>`;
}

Now we will test it on a local server so for this we will bundle the Angular project and then run the spfx web part as below.

• Our application will serve on SharePoint-SiteURL + /_layouts/15/workbench.aspx page.
• After this is successfully served on localhost we will deploy it in our SharePoint site using gulp bundle --ship and gulp package-solution --ship commands.

Output

Find the complete source code here.

Summary

In this article, we have seen how to integrate the SPFx web part with Angular elements with prerequisites, environment setup, development, deployment, and demo application.

I hope this helps.

Sharing is caring!!!