Angular Elements

@martzellk

Hi, I'm Marcell

@martzellk

Father, Software Engineer

Agenda

1. Theory

2. Practice

What is Angular Elements?

Shipped with v6.0.0

Framework Independent

Portable Angular Components

<html>
    ...
    <script src="ng-calendar.js"></script>
    ...
    <ng-calendar></ng-calendar>
    ...
</html>

Web Components

Custom Elements 👉 Docs

Rob Wormland 👉 Repo

Same API as native DOM (attributes, properties, methods, events)

customElements.define('ng-calendar', CalendarComponent);

Familiar Lifecycle Callbacks (connected, disconnected, adopted, attributeChanged)

Official Angular Elements Page 👉 D ocs

Support

Chrome, Safari, Opera natively

👉 more info

We have polyfills

👉 webcomponents polyfills

What we need is:

👉 @angular/elements

import { createCustomElement } from '@angular/elements';
...
const calendar = createCustomElement(CalendarComponent, { injector });
customElements.define('ng-calendar', calendar);

Let's get our hands dirty

Portable Calendar
Built with Angular
Input: Events
Output: Selected Event

Goal

Credits To

Pascal Precht
Angular Elements Slideshow

Tomes Sułkowski
Building Custom Elements with Angular 6

Ben Tedder

Create a Calendar Grid Component in Angular 4