title: How to refresh data with angular?
body: <p>I'm trying to make a simple page where i can add a value into a database (which contains only Id and a value). I would like also to display all values from the database into the page.</p>
  
  <p>The code works well, i can add and display informations, but i got a problem.</p>
  
  <p>The problem is that i'm stuck into the "loading". In order to display i have to select my component page, then go onto an other page, and finally go back onto my page, then it works.
  Notice that when i put the method "getData()" without using a service it display correctly. So i think my problem is due to my service, but i don't understand why.</p>
  
  <p>Here is my html code : </p>
  
  <pre><code>&lt;h1&gt; data to display : &lt;/h1&gt;
  
  &lt;p *ngIf="!data"&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
  &lt;table class='table' *ngIf="data"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Id&lt;/th&gt;
        &lt;th&gt;Nom&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor="let dataToDisplay of data"&gt;
        &lt;td&gt;{{ dataToDisplay.id }}&lt;/td&gt;
        &lt;td&gt;{{ dataToDisplay.nom }}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;h1&gt;add Data : &lt;/h1&gt;
  &lt;form (ngSubmit)="onSubmit(f)" #f="ngForm"&gt;
    &lt;label for="name"&gt;Name&lt;/label&gt;
    &lt;input class="form-control" type="text" name="name" ngModel&gt;
    &lt;button class="btn btn-primary" type="submit" [disabled]="f.invalid"&gt;Enregistrer&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And the .ts file : </p>
  
  <pre><code>import { Component } from '@angular/core';
  import { ValuesService } from '../Services/values.service';
  import { Person } from '../models/values-interface';
  import { NgForm } from '@angular/forms';
  
  
  @Component({
      selector: 'app-test',
      templateUrl: './test.component.html',
      styleUrls: ['./test.component.css']
  })
  /** test component*/
  export class TestComponent {
    /** test ctor */
    public data: any;
    constructor(private monService: ValuesService) { }
    ngOnInit() {
      this.data = this.monService.getData();
    }
  
    onSubmit(form: NgForm) {
      const name = form.value['name'];
      this.monService.postData(name);
    }
  }
  </code></pre>
  
  <p>Thanks a lot for your help.</p>