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 @AngularInDepth 2019, Kiev
Search
Manfred Steyer
PRO
June 15, 2019
Programming
0
400
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
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
57
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
46
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
230
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
390
Micro Frontends with Web Standards
manfredsteyer
PRO
1
290
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
210
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
100
NGRX Signal Store
manfredsteyer
PRO
0
200
Other Decks in Programming
See All in Programming
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
100
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
180
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
Designing for tomorrow's programming workflows
honnibal
PRO
2
110
プールにゆこう
irof
2
120
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
640
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
Ruby Function Composition
bkuhlmann
1
330
코틀린으로 멀티플랫폼 만들기
pangmoo
0
120
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
250
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
92
4.8k
YesSQL, Process and Tooling at Scale
rocio
163
13k
Become a Pro
speakerdeck
PRO
10
4.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
How to train your dragon (web standard)
notwaldorf
72
5.1k
Producing Creativity
orderedlist
PRO
336
39k
How GitHub (no longer) Works
holman
304
140k
Typedesign – Prime Four
hannesfritz
36
2k
Music & Morning Musume
bryan
41
5.6k
Product Roadmaps are Hard
iamctodd
43
9.7k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
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