![](https://ccweb.imgix.net/https%3A%2F%2Fwww.classcentral.com%2Fimages%2Ficon-black-friday.png?auto=format&ixlib=php-4.1.0&s=fe56b83c82babb2f8fce47a2aed2f85d)
Overview
![](https://ccweb.imgix.net/https%3A%2F%2Fwww.classcentral.com%2Fimages%2Ficon-black-friday.png?auto=format&ixlib=php-4.1.0&s=fe56b83c82babb2f8fce47a2aed2f85d)
Syllabus
Intro
Choosing the right path is critical.
Modern Frontends
Single Page Applications (SPAs)
DOM Manipulation
What are Web Components?
Use Cases
Micro Frontends
Shared Components
Anatomy of a Custom Element
Selector String
JavaScript Class
Options Object
Bells & Whistles
Lifecycle Methods
HTML Templates
It's complicated...
Custom Element Libraries
Stencil
Modernization
AngularJS to Angular
Why Angular Elements?
Tightly Coupled
Dependency Injection
The Elements Upgrade Strategy
Set Up Bottom-up components Create vanilla j5 services with wrappers Convert routing and remove Elements
Setting Up Angular Elements
Add Angular Elements
Upgrading Components
AngularJS 1.7+ Helpers
ng-custom-element
Tip: Group into Modules
Sharing Data with Services
Off-Roading with JS
Wrap Shared JS Services
Inputs & Outputs
Indirection
Wrapping Up the Upgrade
Add Component Selectors
Switch Routing
Drop Elements
Taught by
NDC Conferences