title: Angular 2, How to Share Array Data Between components using service?
body: <p>In Angular2, Share Array data between components using service?</p>
  
  <p>I'm designed this structure like below.
  <a href="https://i.stack.imgur.com/E8ItT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E8ItT.png" alt="enter image description here"></a></p>
  
  <pre><code>object structure
  {
      data: 'data'
      keys: ['key1', 'key2', ... , 'keyN']
  }
  
  * Service has a array of total objects.
  totalObject = [object1, object2, ... , objectN]
  </code></pre>
  
  <p>At first I initialized selectedObject of service like this.</p>
  
  <pre><code>selectedObject = totalObject;
  </code></pre>
  
  <p>Then I initialized selectedObject of Component B on constructor like this.</p>
  
  <pre><code>constructor(private wordService: WordService) {
       this.words = wordService.selectedWords;
  }
  </code></pre>
  
  <p>At the first, Component B displayed All objects correctly!!
  But, when the service initialize new array to selectedObject, Component B cannot display selected objects.</p>
  
  <hr>
  
  <pre><code> // It's not working...
   // remove
  this.selectedWords.splice(0, this.selectedWords.length);
  
  // add
  for(let i in WORDS) {
    if(WORDS[i].keys.indexOf(key) &gt;= 0) {
      this.selectedWords.push(WORDS[i]);
    }
  }
  </code></pre>