Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Workshop: Angular Elements @AngularInDepth 2019...

Avatar for Manfred Steyer Manfred Steyer PRO
June 15, 2019
Programming
0
280

Workshop: Angular Elements @AngularInDepth 2019, Kiev

Avatar for Manfred Steyer

Manfred Steyer PRO

June 15, 2019
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Beyond the Basics: Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
34
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
All About Angular‘s New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
26
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
260
Your Architecture as a Crime Scene? Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
260
Your Architecture as a Crime Scene: Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
Reactive Thinking with Signals and the new Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
250
Rethinking Angular: The Future with Signal Store and the New Resource API @w-jax 2025, Munich
Avatar for Manfred Steyer manfredsteyer
PRO
0
110

Other Decks in Programming

See All in Programming
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.9k
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1.1k
Basic Architectures
Avatar for Denys Poltorak denyspoltorak
0
670
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
Avatar for izumin5210 izumin5210
6
1.8k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
690
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
180
CSC307 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
830
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k
Automatic Grammar Agreementと Markdown Extended Attributes
について
Avatar for Kishikawa Katsumi kishikawakatsumi
0
180
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370

Featured

See All Featured
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
190
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
690
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
140
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
46k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
96

Transcript

  1. @ManfredSteyer Workshop: A Deep Look into Angular Elements Manfred Steyer

    SOFTWAREarchitekt.at ManfredSteyer

  2. @ManfredSteyer ✓ Commodore 64 ✓ 1982 ✓ ~ 1 MHz

    ✓ 64 KB RAM ✓ Disks with 170 KB

  3. @ManfredSteyer Version with two cores ;-) Challenge: Resources!

  4. @ManfredSteyer Long Time Maintain- ability Maintain + Extend for 10

    +/- yrs

  5. @ManfredSteyer There are milk products lasting longer than some JavaScript

    frameworks

  6. @ManfredSteyer Web Components

  7. @ManfredSteyer Contents • Web Components 101 • Web Components with

    Angular Elements • Polyfills • Dynamically Adding Web Components • Loading External Web Components

  8. @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular

    Trainings and Consultancy • Google Developer Expert (GDE) • Trusted Collaborator in the Angular Team Page ▪ 8 Manfred Steyer Public: Selected European Cities In-House: everywhere http://www.softwarearchitekt.at

  9. @ManfredSteyer Standards behind Web Components Templates Shadow DOM Custom Elements

    Omnipresent in Angular Baked-in: @Component(encapsulation: …) Angular Elements

  10. @ManfredSteyer DEMO

  11. @ManfredSteyer All this can be polyfilled down to IE11 (more

    or less)

  12. @ManfredSteyer Polyfill

  13. @ManfredSteyer Selected Polyfills loader • Custom Elemens • Shadow DOM

    es5-adapter • For browsers that DO support custom elements • Alternative: Differential Loading

  14. @ManfredSteyer DEMO

  15. @ManfredSteyer Labs https://www.softwarearchitekt.at/labs/AngularInDepth/

  16. @ManfredSteyer More on SOFTWAREarchitekt.at • Angular Elements, Part I to

    V • Web Components with Angular Ivy in 6 Steps

  17. @ManfredSteyer Summary Polyfills Custom_Element_Schema Angular Elements Shadow DOM Dynamically Adding

    Dynamically Loading

  18. @ManfredSteyer Contact and Downloads [mail] [email protected] [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer

    d Blog about this stuff Public: Selected European Cities In-House: everywhere http://www.softwarearchitekt.at