Teleport a component in Angular (and keep its state) скачать в хорошем качестве

Teleport a component in Angular (and keep its state)

Tired of losing component state when moving elements around in Angular? 👕 Built for Angular builders. Get the Shieldworks “United by Craft” tee → https://shop.briantree.se/products/sh... In this tutorial, we’ll explore three different approaches: NgTemplateOutlet, CDK TemplatePortal, and the DomPortal, to see when Angular recreates your view and when it actually moves the same live component instance. You’ll learn how to teleport components across your layout without losing state. Stick around for the one-line rule that will help you remember exactly which approach to use in your own Angular apps. ------------------------------------------------------------------------------ 🔔 Subscribe for more Angular tutorials & tips → [🔗 https://www.youtube.com/c/briantreese...] 👍 Like this video if you found it helpful, it really helps support the channel! ------------------------------------------------------------------------------ 🔗 Demo Links: Before (https://stackblitz.com/edit/stackblit...) After (https://stackblitz.com/edit/stackblit...) ------------------------------------------------------------------------------ 📚 Additional Resources: Angular CDK Portal Documentation: https://material.angular.dev/cdk/port... NgTemplateOutlet Directive: https://angular.dev/api/common/NgTemp... Angular Signals Overview: https://angular.dev/guide/signals My course "Angular: Styling Applications": https://www.pluralsight.com/courses/a... My course "Angular in Practice: Zoneless Change Detection": https://app.pluralsight.com/library/c... ------------------------------------------------------------------------------ 📖 Chapters: 0:00 – Introduction 0:37 – Demo Setup: Moving a Component Across Layouts 2:31 – Part 1: Using ng-template and ngTemplateOutlet 4:17 – Part 2: Try the CDK TemplatePortal 7:09 – Part 3: DomPortal (the win) 9:45 – Key Takeaways: Templates Recreate vs DomPortal Moves ------------------------------------------------------------------------------ 🧰 About the Tools Used This video uses the Angular CDK Portal Module to compare NgTemplateOutlet, TemplatePortal, and DomPortal. These tools determine whether Angular recreates a component view or reuses the same live instance, letting you preserve component state across layout changes. ------------------------------------------------------------------------------ #angular #cdk #angular20 #webdevelopment #frontend