Angular Template

Teleport a Component in Angular (and Keep Its State)

Teleport a Component in Angular (and Keep Its State)

September 18, 2025

Have you ever moved a component across your layout and watched your state just vanish? In this tutorial, we'll try to avoid this with three different approaches: ng-template with ngTemplateOutlet, the CDK Template Portal, and the CDK DomPortal. You’ll see when Angular recreates views and how to move a live component without losing state. Stick around until the end and you’ll leave with a one-line rule you’ll never forget...

Stop Adding Repetitive Code in Components! Use ngTemplateOutlet Instead

Stop Adding Repetitive Code in Components! Use ngTemplateOutlet Instead

September 27, 2024

When building Angular applications, we've all been there - stuck with repetitive code that's makes our app large and hard to maintain. We've got sections of code that do similar tasks, but with slight variations, and we copy-paste them in many places. Sometimes throughout the whole app, and sometimes even within a component template. This leads to a mess of code that's difficult to read and update.