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

Workshop: Angular Elements @AngularInDepth 2019...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
32
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
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
160
SourceGeneratorのススメ
Avatar for tkym htkym
0
190
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
Avatar for Hiroyuki Moriya gekko0114
2
430
Architectural Extensions
Avatar for Denys Poltorak denyspoltorak
0
280
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
Avatar for osari.k cloverrose
2
510
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
Avatar for tetutetu214 tetutetu214
2
110
疑似コードによるプロンプト記述、どのくらい正確に実行される？
Avatar for kokuyouwind kokuyouwind
0
380
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
2.5k
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
3.8k
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
150
Lambda のコードストレージ容量に気をつけましょう
Avatar for tatsuki-yamada tattwan718
0
110
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
Avatar for MomokoShirakawa momok47
0
190

Featured

See All Featured
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
84
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
67
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
160
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
140
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
72
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
2k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.2M

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