Angular 2 - 12) Borrar un usuario de la lista con una llamada DELETE

Objetivo:

• Utilizar el método delete del servicio http
• Borrar un usuario guardado en el servidor.

1. Abrir el proyecto angular-faster y abrir el archivo llamado user.service.ts. Agregar un nuevo método como sigue:

deleteUser(id) {

  return this.http.delete(SERVER_REST_API_URL + id);

}

2. Abrir el archivo llamado users.component.ts y agregar el siguiente método:

private loadUsers() {

  this.users = [];

  this.userService.getUsers()

      .subscribe((resp) => {

        for(let u of resp) {

          this.users.push(new User(u.id, u.name, u.username));

        }

    });

}

3. Dentro del archivo users.component.ts actualizar el método ngOnInit() como sigue:

ngOnInit() {

  this.loadUsers();

}

4. Dentro del archivo users.component.ts actualizar el método onUserCreated() como sigue:

onUserCreated(event) {

  this.loadUsers();

}

5. Dentro del archivo users.component.ts agregar un nuevo método llamado deleteUser() como sigue:

deleteUser() {

  this.userService.deleteUser(this.activeUser.id).subscribe((resp) => {

     this.activeUser = null;

     this.loadUsers();

  });

}

6. Abrir el archivo llamado users.component.html y actualizar la sección donde se muestra el usuario seleccionado:

<header >

<div class="container">

  <nav class="navbar navbar-inverse">

      <div  class="navbar-header">

          <a  class="navbar-brand" href="/">Mi Angular App!</a>

      </div>

  </nav>

</div>

</header>

<main>

<div class="container">

  <div class="col-sm-4" *ngIf="users">

    <ul class="list-group">

      <li *ngFor="let u of users" (click)="selectUser(u)" class="list-group-item" [class.active]="u == activeUser">

          {{u.name}} {{u.username}}

      </li>

    </ul>

    <app-user-form (userCreatedEvent)="onUserCreated($event)"></app-user-form>

  </div>

  <div class="col-sm-8 user-actived">

    <div *ngIf="activeUser">

      <div class="col-sm-11"><h2>{{activeUser.name}} <small>{{activeUser.username}}</small></h2></div>

      <div class="col-sm-1"><h2 (click)="deleteUser()" class="hang glyphicon glyphicon-trash"></h2></div>

    </div>

    <div *ngIf="!activeUser">

      <h2>Seleccionar un usuario</h2>

    </div>

  </div>

</div>

</main>

Con esto llamamos al método deleteUser() cuando se hace click en la imagen del cesto de basura.

7. Abrir el archivo users.component.css como sigue:

.list-group-item, .hang {

  cursor: pointer;

}

.user-actived {

  background-color: #ecf0f1

}

8. Abrir una consola y levantar la aplicación utilizando el comando ng serve. La página se debería mostrar algo parecido a esto:

Repositorio en GitHub