Although this issue has been over 2 years old, I want to pay my 5 cents ...
This is not an Angular problem, but how Javascript works ... Simple variables (number, string, boolean, etc.) are passed by value, while complex (objects, arrays) are passed by reference:
You can read more about this in the Kyle Simpson series. You do not know js:
https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch2.md#value-vs-reference
That way, you can use the @Input () object variable to divide the scope between components without the need for emitters, observers, and the like.
// In toggle component you define your Input as an config object @Input() vm: Object = {}; // In the Component that uses toggle componet you pass an object where you define all needed needed variables as properties from that object: config: Object = { model: 'whateverValue', id: 'whateverId' }; <input type="checkbox" [vm]="config" name="check"/>
Thus, you can change all the properties of the object and get the same value in both components, because they have the same link.
source share