Angular Elements and SPFx

Sahil Malik
Winsmarts.com
Published in
5 min readNov 1, 2017

--

This blogpost is about an Angular Labs project. Things may change before it is released.

Angular is pretty good. But it likes to own the page, if not the whole website. It is hard to,

a) Have Angular co-exist with other stacks

b) Inject angular for one small quick job

c) Package an angular “widget” for use in wordpress, sharepoint, etc.

Interestingly, this is something AngularJS used to be able to do, but Angular has sort of lost this on its way. Technically all of the above is possible with Angular, but it’s complex. Very complex.

And this is exactly the gap that Angular Elements fulfills.

Web Components

Remember web components? Web Components are a set of features currently being added by the W3C to the HTML and DOM specifications that allow for the creation of reusable widgets or components in web documents and web applications.

There are 4 important bits to know about a Web Component.

1. HTML Template: The overall template of a web component. Angular has ng template, sort of similar.

2. Shadow DOM: Maintain a DOM in memory, but not on the main DOM. Great for performance.

3. HTML Imports: Import/export reusable bits of HTML. Hardly anyone uses it.

4. Custom Elements: Ability to add to the vernacular of HTML, basically allows you to define a web component.

Custom Elements

Apparently, there is a property called window.customElement, its available in the latest builds of chrome, try it .. you’ll see it!

This is a well-accepted standard, built into chrome, part of safari technical preview, polyfillable to IE10. This is the magic ticket to enabling us to create any custom element and well, add to the vernacular of HTML.

To add a custom element you can do,

class myElement extends HTMLElement {}
customElements.define(‘my-element’, myElement);

Pretty damn cool isn’t it?

Attributes

You can also watch for attributes, like this,

class MyElement extends HTMLElement {
static get observedAttributes():string[]{ return [‘some-attribute’] }
attributeChangedCallback(oldvalue, newvalue, key) {}}

--

--