�ݺ�ߣ

j
Embed Your Angular
Components EVERYWHERE
Angular Elements

 Full-Stack Developer @CyberArk
 Front-End Technologists Enthusiast
Nadav Mary
https://www.linkedin.com/in/nadav-mary
nadavmary@gmail.com
https://github.com/Slash7GNR

Agenda
 Web Components
 What is Angular Elements?
 Use Cases
 The Magic Behind Angular Elements
 My own experience
 The future – Elements + Ivy = ♥

“Web Components is a suite of different
technologies allowing you to create reusable
custom elements — with their functionality
encapsulated away from the rest of your
code — and utilize them in your web
apps.”
https://developer.mozilla.org/en-US/docs/Web/Web_Components

Web Components
 HTML Templates – Holds HTML code without displaying it.
 HTML Imports - Import HTML documents into other HTML
documents.
 Shadow DOM – Enables style and DOM encapsulation within
a DOM element.
 Custom Elements – Extend the browser vocabulary

Defining a Custom Element
And in the HTML file:
Or in Javascript:

Angular Elements
 Angular V6.0 new feature (May 4, 2018)
 A new package with a single function –
createCustomElement
 Simply convert your angular component to a
custom element

Use Cases
 Content-rich applications
 Static pages
 Server-Side Rendering
 angular.io
 Elements Containers
 Mini-Apps
 Micro-Frontends
 Re-useable Components
 Build once – Use everywhere
 And more…

Demo - Summary
 npm install @angular/elements
 npm install web components polyfills
 Angular Injector
 entryComponents
 ngDoBootstrap
 createCustomElement
 customElements.define
 Build & Drop output EVERYWHERE
https://github.com/Slash7GNR/elements-quick-start

The Magic Behind Angular
Elements

“Angular Component on the inside,
Standards on the outside”
Rob Wormald, Angular
Team

Angular InjectorBridgeHTMLElement Class
constructor
connectedCallback
disconnectedCallback
attributeChangedCallback
Preparation
Initialization
Destroy
SetInputValue
ComponentFactory
ComponentRef
ApplicationRef
@Output()
@Input()
How Does It Work
https://github.com/wizardnet972/angular-elements-talk/tree/master/elements-lite

My Own Experience - Goals
 Choosing a small but interesting component from
CyberArk shared-components repository
 Build it as a web component using angular elements
 Embed it in a react application

My Own Experience – Step Unit
Component

The Future – Elements + Ivy = ♥
 Will be released in Angular version 7 (September-October)
 IVY is a new view engine (replacing Renderer2)
 Smaller, faster and simpler
 “Hello, World” demo application is incredibly tiny – 3.3KB!
 Can be tested via enableIvy: true, flag of angularCompilerOptions
in tsconfig.json

�ݺ�ߣ

Angular elements - embed your angular components EVERYWHERE

More Related Content

Angular elements - embed your angular components EVERYWHERE

Editor's Notes