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
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
29
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
manfredsteyer
PRO
0
53
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
120
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
160
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
220
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
500
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
180
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
220
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
880
Other Decks in Programming
See All in Programming
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
4
1.4k
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
3
760
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
140
goにおける コネクションプールの仕組み を軽く掘って見た
aronokuyama
0
150
SQL Server ベクトル検索
odashinsuke
0
130
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
1.1k
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
360
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
270
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
160
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
500
ローコードサービスの進化のためのモノレポ移行
taro28
1
350
英語 × の私が、生成AIの力を借りて、OSSに初コントリビュートした話
personabb
0
150
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
67
11k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Docker and Python
trallard
44
3.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Faster Mobile Websites
deanohume
306
31k
RailsConf 2023
tenderlove
29
1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
How STYLIGHT went responsive
nonsquared
99
5.4k
Rails Girls Zürich Keynote
gr2m
94
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