Angular2: Pass by reference to interact between components

angular angular2-components
Sumit Agarwal picture Sumit Agarwal · Oct 26, 2016 · Viewed 21.5k times · Source

When we pass a modelto the child component and it modifies it, the values are just reflected in the child components' local variable and not available to the parent. Can we pass values by reference from parent to child. So the changes are visible there as well.

I have implemented the same using an observable at the service layer. But can't we pass by reference through @Input?

Answer

Günter Zöchbauer picture Günter Zöchbauer · Oct 26, 2016

Primitive values (string, num, boolean, object references) are passed by value (copied), objects and arrays are passed by reference (both components get a reference to the same object instance).

Just wrap your primitive values in objects and changes will be reflected on both sides.

Angular2 change detection won't detect changes to values in arrays or object properties (except when binding expressions address them).

Related questions

How to call another components function in angular2

I have two components as follows and I want to call a function from another component. Both components are included in the third parent component using directive. Component 1: @component( selector:'com1' ) export class com1{ function1(){...} } Component 2: @component( selector:'com2…

Read More
Angular - What is the meanings of module.id in component?

In an Angular app, I have seen that @Component has property moduleId. What does it mean? And when module.id is not defined anywhere, the app still works. How can it still work? @Component({ moduleId: module.id, selector: 'ng-app', templateUrl: …

Read More
Pass variable to custom component

I have my custom component: @Component({ selector: 'my-custom-component', templateUrl: './my-custom-component.html', styleUrls: ['./my-custom-component.css'] }) export class MyCustomComponent { constructor() { console.log('myCustomComponent'); } } I can use it like this: <my-custom-component></my-custom-component> But how I can pass …

Read More