title: Refresh Angular 4 Component
body: <p>I've seen that this question already has been asked sometimes here on stackoverflow, but none of them seems to match my example.</p>
  
  <p>I have two different json files. In my sidemenu, I have two buttons. By clicking on one of them, I want to display the data of the other json file I got. So in my view then, the data of the other file should be shown. I think I got it halfway, because when I click on the buttons, I can see in my console, that the other json file is loaded.</p>
  
  <p>I'm switching and changing the files like this:</p>
  
  <p><strong>rest.ts</strong></p>
  
  <pre><code>jsonFile = 'primarycolors.json'; // --&gt; this file should be loaded at first (default file)
  .
  .
  .
   // the buttons call this function
  changeColorJson(name) {
      if(name === 'S'){
        this.jsonFile = 'secondarycolors.json';
        this.getDataFromJson(); // here I'm loading the function below. In my console then I can see, that this file was correctly loaded
      }
      else {
        this.jsonFile = 'primarycolors.json';
        this.getDataFromJson(); // same here
      }
  }
  
  
  getDataFromJson() {
      return new Promise(resolve =&gt; {
        this.http.get('../../assets/data/' + this.jsonFile) //here should be the path with the correct file
          .subscribe((data) =&gt; {  
    resolve(data);
            console.log(data);
      });
    }
  </code></pre>
  
  <p>As you can see, I called the function getDataFromJson() in changeColorJson(name). I have a console log to show which json file is loaded and this works fine.</p>
  
  <p><strong>Now to my problem:</strong></p>
  
  <p>I'm calling getJsonDataFromJson() from the changeColorJson(name) function, where it loads the correct json file when I click on one of the buttons, but I am also calling getJsonDataFromJson() from the component I want to display the files in and there I'm calling the function only once, and then it doesn't get the new data. Now I'm asking, what can I do to refresh my color component? So it also gets the new data?</p>
  
  <p>Here's my colors component:</p>
  
  <p><strong>colors.html</strong></p>
  
  <pre><code>&lt;div *ngFor="let color of colors"&gt;
    &lt;p&gt;{{color.name}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>colors.ts</strong></p>
  
  <pre><code>colors: any;
  .
  .
  .
    getData() {
      this.restProvider.getDataFromJson() //the same function from above
        .then(data =&gt; {
          this.colors = data; //adding the data I got from json to colors
  
     // What can I do here to refresh the data I'm getting?
     });
  }
  </code></pre>