My lecture about angular elements, a new feature released in angular version 6 which allows us to transform angular components into custom elements and use them outside angular's scope.

1. j
Embed Your Angular
Components EVERYWHERE
Angular Elements

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

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

4. “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

5. 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

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

7. Custom Elements Reactions

8. 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

9. 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…

10. Demo

11. 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

12. The Magic Behind Angular
Elements

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

14. 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

15. 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

16. My Own Experience – Step Unit
Component

17. And The Result…

18. 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

19. This is just the
beginning

20. Thank You!