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

Angular elements - łączymy się z innymi

Avatar for Tomasz Chomicz Tomasz Chomicz
March 31, 2021
Programming
0
21

Angular elements - łączymy się z innymi

Avatar for Tomasz Chomicz

Tomasz Chomicz

March 31, 2021
Tweet

Other Decks in Programming

See All in Programming
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
180
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
220
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
290
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k
dchart: charts from deck markup
Avatar for Anthony Starks ajstarks
3
1k
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
1
980
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
7.5k
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
720
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
140

Featured

See All Featured
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
440
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
450
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
310
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
4.6k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
100
Design in an AI World
Avatar for tapps tapps
0
140
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
590
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.5k

Transcript

  1. None

  2. Angular Elements Tomasz Chomicz FrontEnd Developer

  3. Wstęp

  4. Nie ma rzeczy uniwersalnych ?

  5. Co to jest WebComponent ?

  6. WebComponent ELEMENT DRZEWA DOM O ZESTAWIE CECH I ZDEFINIOWANYM ZACHOWANIU

  7. Jakiś przykład ?

  8. – Custom elements – Shadow DOM – HTML Templates Co

    to jest WebComponents ?

  9. Angular Elements

  10. Przepis – Tworzymy projekt – Dodajemy @angular/elements – Tworzymy nowy

    komponent

  11. Przepis cd... – Nie zpapomnij o ... Polifil –ach (polyfills.ts)

  12. – Tworzymy niestandardowy element – Definiujemy tag – Wmawiamy angularowi

    że aplikacja wystartowała Przepis cd... Osadzamy element na stronie

  13. Czy o czymś nie zapomniałeś?

  14. Komponent - HTML

  15. Komponent – TS

  16. Komunikacja – @Input() – parsujemy wartość – @Output()– małe liter

    – @HostBinding() – dbamy o zmiany atrybutów

  17. A co ze stylami ?

  18. Shadow DOM

  19. Jak poradzić sobie z Shadow DOM?

  20. Zmienne CSS

  21. To już prawie koniec

  22. Build

  23. None

  24. Thank you pgs-soft.com [email protected]