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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
190
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
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
91
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
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
74
Other Decks in Programming
See All in Programming
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
710
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
61
18k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
520
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
270
技術同人誌をMCP Serverにしてみた
74th
1
620
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
660
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Team operations that are not burdened by SRE
kazatohiei
1
300
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
320
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
740
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
150
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Cult of Friendly URLs
andyhume
79
6.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Embracing the Ebb and Flow
colly
86
4.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Practical Orchestrator
shlominoach
188
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Site-Speed That Sticks
csswizardry
10
680
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