Unleashing the Potential of Micro Frontends with Angular

on YouTube ↗09m

" summary

Builds a microfrontend system using plain Angular and an iFrame directive (open‑source "bubble box") that proxies inputs/outputs via window postMessage so iframes behave like components. Host acts as a container‑presenter pattern fetching APIs and passing product arrays; child iframes render lists, emit events (page change, form submit) as observables, and receive loader/state updates. Demo shows a moon‑phase host sending item payloads and toggling a child loader after an API round trip.

AI-written summary · about

" chapters (6)

1. 0:00Introduction and concepts
2. 1:18Benefits of micro frontends
3. 2:07The role of iframes
4. 4:31Implementing with directives
5. 6:57Technical demo
6. 7:55Conclusion and wrap-up

" related talks

• 31mMicro frontends and the multiverse of FrameworksAdrian Iskandar Espinosa Caballero · ng-conf 2022
• 47mMicro Frontends UnmaskedManfred Steyer · Micro Frontends Conference 2024
• 42mMicroFrontends for MicroServicesThomas Bröll · JCON 2020
• 46mScaling Micro-Frontends with Custom ElementsFrank Borkin · Build Stuff 2022
• 46mMicro Frontend: the microservice puzzle extended to frontendaudrey neveu · Voxxed Days Microservices 2019
• 36mFearless Microfrontends: Angular and Native Federation in ActionDavide Senatore · angularday 2025
• 29mMicro Frontends, or How to Evolve to an Extensible FrontendBenjamín Martínez · JSConf Mexico 2020 Virtual Edition
• 36mMicro Frontends in Action!Peter Eijgermans · Voxxed Days Brussels 2023