Angular 2 - 7) Actualizar la lista de usuarios usando un nuevo formulario

Objetivo:

• Utilizar EventEmitter
• Utilizar Output para crear eventos

1. Abrir el archivo llamado user-form.component.ts y actualizar con la siguiente información:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

import { User } from '../shared/models/user';

@Component({

selector: 'app-user-form',

templateUrl: './user-form.component.html',

styleUrls: ['./user-form.component.css']

})

export class UserFormComponent implements OnInit {

@Output() userCreatedEvent = new EventEmitter();

newUser: User;

constructor() { }

onSubmit() {

  this.userCreatedEvent.emit({user: this.newUser});

  this.newUser = new User("","","");

}

ngOnInit() {

  this.newUser = new User("","","");

}

}

2. Abrir el archivo user-form.component.html y actualizar con la siguiente información:

<form #userForm="ngForm" (ngSubmit)="onSubmit()" >

<div class="form-group">

  <input type="text" placeholder="Name"  class="form-control" name="name" required

         [(ngModel)]="newUser.name">

</div>

<div class="form-group">

  <input type="text" placeholder="User name" class="form-control" name="username" required

         [(ngModel)]="newUser.username">

</div>

<button type="submit"  class="btn btn-primary btn-lg btn-block" [disabled]="userForm.invalid">

    Crear Usuario

</button>

</form>

3. Abrir el archivo llamado users.component.ts y agregar un nuevo método llamado onUserCreated con la siguiente información :

import { Component, OnInit } from '@angular/core';

import { User } from '../shared/models/user';

@Component({

selector: 'app-users',

templateUrl: './users.component.html',

styleUrls: ['./users.component.css']

})

export class UsersComponent implements OnInit {

message:string;

users: Array<User>;

activeUser;

constructor() { }

ngOnInit() {

  this.message = "Bienvenidos";

  this.users = [

    new User(25, "Leo", "Leonel"),

    new User(26, "Diego", "Diegote"),

    new User(27, "Martin", "tincho")

  ];

}

selectUser(user) {

  this.activeUser = user;

}

onUserCreated(event) {

  this.users.push(event.user);

}

}

4. Actualizar el tag <app-user-form> en el archivo llamado users.component.html de la siguiente manera:

<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">

      <h2>{{activeUser.name}} <small>{{activeUser.username}}</small></h2>

    </div>

    <div *ngIf="!activeUser">

      <h2>Seleccionar un usuario</h2>

    </div>

  </div>

</div>

</main>

5. Levantar la aplicación utlizando ng serve y deberíamos poder agregar un nuevo elemento a la lista actual.

Repositorio en GitHub