joelkesler / angular-share-objects-instead-of-values

Passing Objects vs Passing Values for sharing data between children and parent components in Angular

Passing Objects vs Passing Values for sharing data between children and parent components in Angular

From a Vendasta internal tech demo.

Try on StackBlitz ⚡️

When you pass an object as an input to a component, it's used as a reference/pointer to the original object. Any change you make to that object in a child component are shared between everything using that object.

If you pass in a bare value/variable (string, number, boolean, etc) then the value is duplicated, and changes made by a child component are not shared with anything else using that value/variable.

In the Angular Email Builder I used this to keep the main email data object updated when the user edited the email.