title: Angular 7-Sharing variable between components dynamically
body: <p>I am trying to share a variable between two components. I was able to do so. However, when the variable's value is changed in the parent component, it is not reflected in the child one.</p>
  
  <p>Demo can be found at below:</p>
  
  <p><a href="https://stackblitz.com/github/abdelrahman84/Vacation-Planner-Angular?fbclid=IwAR1gS4ScuGo9mOybQWwrZeGkmKz6MV3QM5d3_bSl0cIxkAXpw7jRu60XOmM" rel="nofollow noreferrer">https://stackblitz.com/github/abdelrahman84/Vacation-Planner-Angular?fbclid=IwAR1gS4ScuGo9mOybQWwrZeGkmKz6MV3QM5d3_bSl0cIxkAXpw7jRu60XOmM</a></p>
  
  <p>Name of the variable: DiffDate...Original value: 10</p>
  
  <p>Original component of the variable: datepicker-range.ts</p>
  
  <p>Child component to use the variable: app.component.ts</p>
  
  <p>For instance, if you selected only two days as vacation, the difference in days becomes 2. However, in the child, it is still 10.</p>
  
  <p>Appreciate your support in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/ZCLZ8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZCLZ8.png" alt="enter image description here"></a></p>