Angular HTTP call does not triggers? Nothing happens

Question

I'm new to Angular of course :) I have a list and I use [(ngModel)] to display an element of this list. Then I want to update this selected element and persist the changes with a button. this is my code :

html component

<div *ngIf="selectedAction">
  <label>Titre :
    <input [(ngModel)]="selectedAction.title" />
  </label><br />
  <label>Détails :
    <input [(ngModel)]="selectedAction.details" />
  </label><br />
  <label>Date limite :
      <input [ngModel]="selectedAction.date_limite | date:'dd/MM/yyyy'" (ngModelChange)="selectedAction.date_limite=$event" />
  </label><br />
  <button type="button" class="btn btn-primary"
    (click)="save();"
    style="float: none;">Modifier</button>
  <button type="button"class="btn btn-primary"
    (click)="clear()"
    style="float: none;">Cacher</button>
</div>
<!-- Affichage de la liste des actions -->
<h2>Ma liste d'action</h2>
  <ul class="list-group">
    <!-- Lors du click sur l'élément de la liste, la méthode onSelect() s'exécute -->
    <li *ngFor="let action of actions" (click)="onSelect(action)" class="list-group-item" style="padding: 0.25rem 1.25rem;">
      <span>{{ action.title | uppercase }}</span>
      <span>: {{ action.details }}</span>
        <button type="button" class="btn btn-primary" title="delete action"
          (click)="delete(action)">Archiver</button>
    </li>
  </ul>

ts component with the save() action for the 'Modifier' button

save(): void {
    this.actionService.updateAction(this.selectedAction);
  }

Then the service component

updateAction (action: Action): Observable<any> {
    return this.http.put(this.actionsUrl, action, httpOptions).pipe(
      catchError(this.handleError<any>('updateAction'))
    );
  }

Actually, when I click on the button, nothing happens.

Thx for helping.

Answer 1

Whenever you make a call to HTTP in Angular (which is based on RxJS Observable), you should subscribe it. You forgot to subscribe the updateAction() method which returns an Observable. Only when you subscribe to an Observable , the HTTP call will happen.

save(): void {
    this.actionService.updateAction(this.selectedAction).subscribe();
 }

You need to update the list in the subscribe method. Which will in return re render in html to produce the output.