Teleport a component in Angular (and keep its state)

Tired of losing component state when moving elements around in Angular?

🚀 Want to master Angular Signal Forms?
I just released a full course where we build a real Signal Form step-by-step covering validation, async validation, dynamic fields, custom controls, and submission patterns.

👉 Enroll here:
https://www.udemy.com/course/angular-signal-forms/?couponCode=021409EC66FC6440B867

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?sub_confirmation=1]
👍 Like this video if you found it helpful, it really helps support the channel!

------------------------------------------------------------------------------

🔗 Demo Links:
- Before (https://stackblitz.com/edit/stackblitz-starters-bj7pn1f2?file=src%2Fmain.html)
- After (https://stackblitz.com/edit/stackblitz-starters-1xnmwh7p?file=src%2Fmain.html)

------------------------------------------------------------------------------

📚 Additional Resources:
- Angular CDK Portal Documentation: https://material.angular.dev/cdk/portal/overview
- NgTemplateOutlet Directive: https://angular.dev/api/common/NgTemplateOutlet
- Angular Signals Overview: https://angular.dev/guide/signals
- My course "Angular: Styling Applications": https://www.pluralsight.com/courses/angular-styling-applications
- My course "Angular in Practice: Zoneless Change Detection": https://app.pluralsight.com/library/courses/angular-practice-zoneless-change-detection

------------------------------------------------------------------------------

🎓 Angular Certification (New)

If you’re looking to validate your Angular skills, there’s now an official certification built and reviewed by Google Developer Experts.

It covers modern Angular concepts and is one of the first structured ways to demonstrate real-world Angular knowledge.

👉 https://certificates.dev/angular?friend=TREESE

(They’re currently offering up to 50% off)

------------------------------------------------------------------------------

📖 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

Видео Teleport a component in Angular (and keep its state) канала Brian Treese