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 👉 Docs

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

 

Angular Elements

By Marcell Kiss

Made with Slides.com

Angular Elements

  • 1,101

More from Marcell Kiss