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
Web Components with Angular Elements: Beyond th...
Search
Manfred Steyer
PRO
May 01, 2019
Programming
2
1.1k
Web Components with Angular Elements: Beyond the Basics @ngconf 2019
Manfred Steyer
PRO
May 01, 2019
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
200
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
90
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
150
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
300
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
95
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
100
Other Decks in Programming
See All in Programming
Porting a visionOS App to Android XR
akkeylab
0
480
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
780
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
13k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
270
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.6k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
ふつうの技術スタックでアート作品を作ってみる
akira888
1
890
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.6k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Code Reviewing Like a Champion
maltzj
524
40k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Docker and Python
trallard
44
3.5k
Statistics for Hackers
jakevdp
799
220k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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 Custom Elements: Framework independent components
@ManfredSteyer Possibilities Component Libraries Enriching existing Apps CMS Integration Dynamic
Loading
@ManfredSteyer Contents • Basics (just one slide) • Dynamically adding
elements • Lazy loading elements • External elements • Bundle Size
@ManfredSteyer About me … • Manfred Steyer SOFTWAREarchitekt.at • Angular
Trainings and Consultancy • Google Developer Expert (GDE) • Angular Trusted Collaborator Page ▪ 9 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: createCustomElement(…) Register it with
browser: customElements.define(…)
@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([…]) otherElement.appendChild(tile); Angular uses Domino to simulate document for SSR!
@ManfredSteyer DEMO
@ManfredSteyer 3) Lazy Loading
@ManfredSteyer 2 Steps for Lazy Elements Register module in angular.json
Load with with NgModuleFactoryLoader
@ManfredSteyer Register in angular.json "lazyModules": [ "[…]/lazy-dashboard-tile.module" ],
@ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class
LazyDashboardTileService { }
@ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class
LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} }
@ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class
LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { const path = '[…]/lazy-dashboard-tile.module‘; […] } }
@ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class
LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { const path = '[…]/lazy-dashboard-tile.module'; return this.loader.load(path).then(moduleFactory => { }); } }
@ManfredSteyer Loading your module @Injectable({ providedIn: 'root' }) export class
LazyDashboardTileService { constructor( private loader: NgModuleFactoryLoader, private injector: Injector ) {} load(): Promise<void> { const path = '[…]/lazy-dashboard-tile.module'; 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 Create application for Custom Elements Compile application to self
contained bundle Load bundle into consumer 3 Steps
@ManfredSteyer Compile to self-contained bundle
@ManfredSteyer ng add ngx-build-plus
@ManfredSteyer One of the simplest bundle loaders … const script
= document.createElement('script'); script.src = 'assets/external-dashboard-tile.bundle.js'; document.body.appendChild(script);
@ManfredSteyer DEMO
@ManfredSteyer 5) Bundle Size
@ManfredSteyer Bundles Custom Element 1 Custom Element 2 Custom Element
3 Libraries: Angular, RxJS, … Libraries: Angular, RxJS, …
@ManfredSteyer Angular Elements + Ivy Custom Element 1 Custom Element
2 Custom Element 3
@ManfredSteyer Where Ivy can help ✓ UI-based Widgets ✓ Libraries
@ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom
Element 3 Libraries: Angular, RxJS, … Drawbacks: Complexity, non-default build, …
@ManfredSteyer Summary Reuse with other technologies Dynamically Adding Lazy Loading
External Elements Ivy for UI-based Code Sharing Dependencies
@ManfredSteyer Sometimes, all we want is a greasy pizza!
@ManfredSteyer Blog > SOFTWAREarchitekt.at • Angular Elements, Part I: A
Dynamic Dashboard In Four Steps With Web Components […] • Angular Elements, Part V: Your Options For Building Angular Elements With The CLI
@ManfredSteyer Workshop: Tomorrow A Deep Look at Angular Elements With
live coding and exercises for you on StackBlitz Thu, May 2:30 pm - 4:30 pm
@ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer
d http://softwarearchitekt.at/workshops Slides & Examples