{
  "posts": [
    { "id": 1, "title": "Item 1" },
    { "id": 2, "title": "Item 2" },
  ],
  "comments": [
    { "id": 1, "body": "a comment", "postId": 1 }
  ],
  "profile": { "name": "Fabio Biondi" }
}

{
  "users": [
    {
      "id": 1,
      "label": "Fabio",
      "gender": "F",
      "age": 20
    },
    {
      "gender": "F",
      "label": "Marianna",
      "id": 2,
      "age": 21
    },
    {
      "gender": "M",
      "label": "Mario",
      "id": 3,
      "age": 20
    }
  ]
}

"scripts": {
  # ... others scripts here ...
  "server": "json-server --watch server/db.json"
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';   // NEW

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule // NEW
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

export class AppComponent {
  // init to empty array
  users: User[] = [];                     
  /* base API url */
  URL = 'http://localhost:3000';          

  // Inject HttpClient Service
  constructor(private http: HttpClient) {
    this.init();
  }

  init() {
    // Get all users from REST API
    this.http.get<User[]>(this.URL + '/users')
      .subscribe(res => {
        // populate the `users` array
        this.users = res;
      });
  }

  deleteHandler(userToRemove: User) {
    // MISSING: we should invoke the endpoint to delete the item from the database
    this.users = this.users.filter(u => u.id !== userToRemove.id);
  }

  saveHandler(f: NgForm) {
    // MISSING: we should invoke the endpoint to add a new item to the database
    const user = f.value as User;
    user.id = Date.now(); // add a fake ID
    this.users = [...this.users, user]
    f.reset({ gender: '' });
  }
}

  deleteHandler(userToRemove: User) {
    // Remove User from db.json
    this.http.delete(`${this.URL}/users/${userToRemove.id}`)
      .subscribe(() => {
        // Update `users` array removing the element from the list
        this.users = this.users.filter(u => u.id !== userToRemove.id);
      });
  }

  saveHandler(f: NgForm) {
    // get form data (it does not contain the `id`)
    const user = f.value as User;
    
    // add the user to db.json
    this.http.post<User>(`${this.URL}/users/`, user)
      .subscribe((dbUser) => {
        // Add the returned user (with `id`) to the `users` array
        this.users = [...this.users, dbUser]
        // reset form to "pristine" status
        f.reset({ gender: '' });
      });
  }

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { User } from './model/user';

@Component({
  selector: 'app-root',
  template: `
    <div class="container">
      <h1>Users</h1>

      <form
        class="card card-body mt-3"
        #f="ngForm"
        (submit)="saveHandler(f)"
        [ngClass]="{
          'male': f.value.gender === 'M',
          'female': f.value.gender === 'F'
        }"
      >
        <input
          type="text"
          [ngModel]
          name="label"
          placeholder="Add user name"
          class="form-control"
          required
          #labelInput="ngModel"
          [ngClass]="{'is-invalid': labelInput.invalid && f.dirty}"
        >

        <select
          [ngModel]
          name="gender"
          class="form-control"
          required
          #genderInput="ngModel"
          [ngClass]="{'is-invalid': genderInput.invalid && f.dirty}"
        >
          <option value="">Select option</option>
          <option value="M">M</option>
          <option value="F">F</option>
        </select>

  
        <button
          class="btn"
          [disabled]="f.invalid"
          [ngClass]="{
            'btn-success': f.valid,
            'btn-danger': f.invalid
          }"
        >Save</button>
      </form>

      <hr>

      <!--LIST BELOW: NO CHANGES HERE-->
      <hr>

      <ul class="list-group">
        <li
          *ngFor="let u of users" class="list-group-item"
          [ngClass]="{
            'male': u.gender === 'M', 
            'female': u.gender === 'F'
          }"
        >
          <i
            class="fa fa-3x"
            [ngClass]="{
            'fa-mars': u.gender === 'M',
            'fa-venus': u.gender === 'F'
          }"
          ></i>

          {{u.label}}

          <i class="fa fa-trash fa-2x pull-right" (click)="deleteHandler(u)"></i>
        </li>
      </ul>
    </div>
  `,
  styles: [`
    .male { background-color: #36caff; }
    .female { background-color: pink; }
    .card { transition: all 0.5s }
  `]
})
export class AppComponent {
  users: User[] = [];                     // init to empty array
  URL = 'http://localhost:3000';          /* server url */

  constructor(private http: HttpClient) {
    this.init();
  }

  init() {
    this.http.get<User[]>(this.URL + '/users')
      .subscribe(res => {
        this.users = res;
      });
  }

  deleteHandler(userToRemove: User) {
    this.http.delete(`${this.URL}/users/${userToRemove.id}`)
      .subscribe(() => {
        this.users = this.users.filter(u => u.id !== userToRemove.id);
      });
  }

  saveHandler(f: NgForm) {
    const user = f.value as User;

    this.http.post<User>(`${this.URL}/users/`, user)
      .subscribe((dbUser) => {
        this.users = [...this.users, dbUser]
        f.reset({ gender: '' });
      });
  }
}