Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
A Deep Look into Angular Elements @AngularInDep...
Search
Manfred Steyer
PRO
June 15, 2019
Programming
0
450
A Deep Look into Angular Elements @AngularInDepth 2019, Kiev
Source Code:
https://github.com/manfredsteyer/angular-elements-ngconf-2019
Manfred Steyer
PRO
June 15, 2019
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
340
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
620
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
490
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
160
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
220
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
360
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
240
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
230
Other Decks in Programming
See All in Programming
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
150
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
360
🔨 小さなビルドシステムを作る
momeemt
4
680
Navigating Dependency Injection with Metro
zacsweers
3
260
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
480
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
160
Laravel Boost 超入門
fire_arlo
3
210
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
160
私の後悔をAWS DMSで解決した話
hiramax
4
210
Design Foundational Data Engineering Observability
sucitw
3
190
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
Featured
See All Featured
Visualization
eitanlees
148
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Why Our Code Smells
bkeepers
PRO
339
57k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Scaling GitHub
holman
463
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Designing for humans not robots
tammielis
253
25k
Transcript
@ManfredSteyer Web Components with Angular Elements: Beyond the Basics Manfred
Steyer SOFTWAREarchitekt.at ManfredSteyer
@ManfredSteyer
@ManfredSteyer [Igor Minar, Angular Connect 2018 Keynote]
@ManfredSteyer
@ManfredSteyer Angular Elements
@ManfredSteyer Web Components: Framework independent components
@ManfredSteyer Custom Elements: Framework independent components
@ManfredSteyer Possibilities Component Libraries Enriching existing Apps CMS- Integration Dynamic
Loading
@ManfredSteyer Contents • Basics • Dynamically adding elements • Lazy
loading elements • External elements • Dealing with dependencies
@ManfredSteyer About me … • Manfred Steyer SOFTWAREarchitekt.at • Angular
Trainings and Consultancy • Google Developer Expert (GDE) • Angular Trusted Collaborator Page ▪ 10 Manfred Steyer Public: Vienna, Munich, Frankfurt In-House: Everywhere in Europe http://www.softwarearchitekt.at/workshops
@ManfredSteyer 1) Basics
@ManfredSteyer Angular Elements Wrap Angular Components Expose Custom Elements
@ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent]
}) export class AppModule { }
@ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent]
}) export class AppModule { }
@ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent]
}) export class AppModule { constructor(private injector: Injector) { } }
@ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent]
}) export class AppModule { constructor(private injector: Injector) { const DateElement = createCustomElement( DateComponent, { injector: this.injector }); customElements.define('date-picker', DateElement); } }
@ManfredSteyer
@ManfredSteyer 2) Dynamic Elements
@ManfredSteyer Adding Custom Elements dynamically const tile = document.createElement('dashboard-tile');
@ManfredSteyer Adding Custom Elements dynamically const tile = document.createElement('dashboard-tile‘); tile['prop']
= 123; tile.setAttribute('class', 'col-lg-4 col-md-3 col-sm-2') tile.addEventListener([…])
@ManfredSteyer Adding Custom Elements dynamically const tile = document.createElement('dashboard-tile‘); tile['prop']
= 123; tile.setAttribute('class', 'col-lg-4 col-md-3 col-sm-2') tile.addEventListener([…]) content.appendChild(tile); Angular uses Domino to simulate document for SSR
@ManfredSteyer DEMO
@ManfredSteyer 3) Lazy Elements
@ManfredSteyer Lazy Loading Register module in angular.json Load with with
NgModuleFactoryLoader
@ManfredSteyer Register in angular.json "lazyModules": [ "[…]/lazy-dashboard-tile.module.ts" ],
@ManfredSteyer Lazy Loading @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService
{ }
@ManfredSteyer Lazy Loading @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService
{ constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} }
@ManfredSteyer Lazy Loading @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService
{ constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { return this.loader.load(path).then(moduleFactory => { }); } }
@ManfredSteyer Lazy Loading @Injectable({ providedIn: 'root' }) export class LazyDashboardTileService
{ constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { return this.loader.load(path).then(moduleFactory => { moduleFactory.create(this.injector); […] }); } }
@ManfredSteyer DEMO
@ManfredSteyer 4) External Elements
@ManfredSteyer Project A Custom Element Custom Element Bundle Project B
@ManfredSteyer Register Custom Element when bootstrapping Compile application to self
contained bundle Load bundle into consumer 3 Steps
@ManfredSteyer Compile to self-contained bundle
@ManfredSteyer ngx-build-plus: --single-bundle
@ManfredSteyer Load into consumer const script = document.createElement('script'); script.src =
'assets/external-dashboard-tile.bundle.js'; document.body.appendChild(script);
@ManfredSteyer DEMO
@ManfredSteyer 6) Dealing with Dependencies
@ManfredSteyer Bundles Custom Element 1 Custom Element 2 Custom Element
3 Libraries: Angular, RxJS, … Libraries: Angular, RxJS, …
@ManfredSteyer Tree Shaking + Ivy (Angular 8.x) Custom Element 1
Custom Element 2 Custom Element 3 Currently: No official Ivy Elements Bridge Inofficial: See my blog (link comes later)
@ManfredSteyer
@ManfredSteyer Where Ivy can help ✓ Widgets based on @angular/core,
@angular/common Libs like @angular/forms or @angular/router
@ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom
Element 3 Libraries: Angular, RxJS, … UMD Drawbacks: Complexity, no isolation
@ManfredSteyer More on SOFTWAREarchitekt.at • Angular Elements, Part I to
V • Web Components with Angular Ivy in 6 Steps
@ManfredSteyer Summary Dynamically Adding Lazy Loading External Elements Ivy for
UI-based Code ngx-build-plus: Sharing Dependencies
@ManfredSteyer Contact and Downloads [mail]
[email protected]
[web] SOFTWAREarchitekt.at [twitter] ManfredSteyer
d http://softwarearchitekt.at/workshops Slides & Examples