title: Angular - Data not refreshing after click
body: <p>After De-Activating row from my data table, I am refreshing my table.I pass the load function after deactivate function but problem is that i have to click twice and sometimes it goes with one click. </p>
  
  <p>I am using MVC5. I put the debug on my C# file and everytime i click Deactivate debugger going to load function.<br>
  Below is my code  :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="margin-top:60px"&gt;
      &lt;h1 style="float:left"&gt;All Machines&lt;/h1&gt;
      &lt;button (click)="OnSave()" style="float:right;background-color:aqua;color:black" class="md-button md-primary md-raised"&gt;
          Add New Machine
      &lt;/button&gt;
      &lt;table class="table" style="width:100%; background-color:#E0F2F1"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th style="text-align:center"&gt;
  
                      Id
                  &lt;/th&gt;
                  &lt;th style="text-align:center"&gt;
  
                      Machine Number
  
                  &lt;/th&gt;
                  &lt;th style="text-align:center"&gt;
  
                      Manufacturer
  
                  &lt;/th&gt;
                  &lt;th style="text-align:center"&gt;
  
                      Model#
  
                  &lt;/th&gt;
                  &lt;th style="text-align:center"&gt;
  
                      Serial#
  
                  &lt;/th&gt;
  
                  &lt;th style="text-align:center"&gt;
  
                      Tonnage
  
                  &lt;/th&gt;
                  &lt;th style="text-align:center"&gt;
  
                      Shot Weight
  
                  &lt;/th&gt;
  
                  &lt;th style="text-align:center"&gt;
  
                      De-Activate
  
                  &lt;/th&gt;
  
              &lt;/tr&gt;
  
              &lt;tr&gt;&lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
              &lt;tr *ngFor="let MyMachine of MyMachines"&gt;
                  &lt;td style="text-align:center"&gt;{{MyMachine.t_id}}&lt;/td&gt;
                  &lt;td style="text-align:center"&gt;{{MyMachine.t_Machine}}&lt;/td&gt;
                  &lt;td style="text-align:center"&gt;{{MyMachine.t_manufacturer}}&lt;/td&gt;
                  &lt;td style="text-align:center"&gt;{{MyMachine.t_model}}&lt;/td&gt;
                  &lt;td style="text-align:center"&gt;{{MyMachine.t_Serial}}&lt;/td&gt;
                  &lt;td style="text-align:center"&gt;{{MyMachine.t_ClampingForce}}&lt;/td&gt;
                  &lt;td style="text-align:center"&gt;{{MyMachine.t_ShotWt}}&lt;/td&gt;
                  &lt;td&gt;&lt;button (click)="OnDeactivate(MyMachine.t_id)" style="float:right;background-color:aqua;color:black" class="md-button md-primary md-raised"&gt;De-Activate&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>2) Component</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { AllMachines } from './app.service'
  @Component({
      selector: 'my-app',
      templateUrl: './MachineList.html'
  })
  export class AppComponent implements OnInit {
      MyMachines: any = [];
  
      constructor(private _AllMachines: AllMachines) {
  
      }
  
      ngOnInit() {
          this.LoadData();
      }
      OnSave() {
          this._AllMachines.AddNewMachine('bbb', 'bbb', 'bbb');
  
      }
  
      OnDeactivate(id: string) {
          this._AllMachines.DeActivateMachine(id);
          this.LoadData();
  
      }
  
      LoadData() {
          this._AllMachines.getAllMachines()
              .subscribe(resmachineData =&gt; this.MyMachines = resmachineData);
      }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>3) Service</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
  import 'rxjs/add/operator/map';
  @Injectable()
  export class AllMachines {
      private configUrl: string = "/Home/GetAllMachines";
      private AddUrl: string = "/Home/AddNewMachine";
      private UpdateUrl: string = "/Home/UpdateMachine";
      private DeActivateUrl: string = "/Home/DeActivateMachine";
      constructor(private http: Http) { }
      headers = new Headers({
          'Content-Type': 'application/json'
      });
      getAllMachines() {
          return this.http.get(this.configUrl)
              .map((response: Response) =&gt; response.json());
      }
  
      AddNewMachine(_MachineNum: string, _Manufatured: string, _MachineModel: string) {
          let body = JSON.stringify({ MachineNum: _MachineNum, Manufatured: _Manufatured, MachineModel: _MachineModel });
          let headers = new Headers({ 'content-type': 'application/json' });
          let options = new RequestOptions({ headers: headers });
          this.http.post(this.AddUrl, body, options).subscribe(
              data =&gt; console.log(data),
              err =&gt; console.log(err.json().message),
              () =&gt; console.log('Authentication Complete')
          );
  
      }
  
      UpdateMachine(_MachineId: string, _MachineNum: string, _Manufacturer: string, _Model: string, _Serial: string, _Tonnage: string, _ShotWt: string) {
          let body = JSON.stringify({ MachineId: _MachineId, MachineNum: _MachineNum, Manufacturer: _Manufacturer, Model: _Model, Serial: _Serial, Tonnage: _Tonnage, ShotWt: _ShotWt });
          let headers = new Headers({ 'content-type': 'application/json' });
          let options = new RequestOptions({ headers: headers });
          this.http.post(this.UpdateUrl, body, options)
              .subscribe(
                  data =&gt; console.log(data),
                  err =&gt; console.log(err.json().message),
                  () =&gt; console.log('Authentication Complete')
              );
      }
  
      DeActivateMachine(_MachineId: string) {
          let body = JSON.stringify({ MachineId: _MachineId });
          let headers = new Headers({ 'content-type': 'application/json' });
          let options = new RequestOptions({ headers: headers });
          this.http.post(this.DeActivateUrl, body, options)
              .subscribe(
                  data =&gt; console.log(data),
                  err =&gt; console.log(err.json().message),
                  () =&gt; console.log('Authentication Complete')
              );
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am using MVC5. I put the debug on my C# file and everytime i click Deactivate debugger going to load function.  </p>