Angular 4: CRUD

Para poder usar formularios en app.module.ts:
import { FormsModule } from '@angular/forms';

imports: [
 BrowserModule,
 FormsModule
 ],

Incluir en el index.html los CDN de jquery y bootstrap

En app.component.css:
.lsg {
    border-radius: 4px;
    margin-top: 20px;
    padding: 30px;
    background: #fff;
}

En styles.css:
body {
 background: #02AAB0;  /* fallback for old browsers */
    background: -webkit-linear-gradient(left, #00CDAC, #02AAB0);
    background: -moz-linear-gradient(left, #00CDAC, #02AAB0);
    background: -o-linear-gradient(left, #00CDAC, #02AAB0);
    background: linear-gradient(to right, #00CDAC, #02AAB0);
}

En app.component.ts:
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  titulo = 'CRUD de Angular';
  msg:string = '';
  empleados = [
    {
      'nombre': 'Uno',
      'cargo': 'Programador',
      'email': 'uno@gmail.com'
    },
    {
      'nombre': 'Dos',
      'cargo': 'Maquetador',
      'email': 'dos@gmail.com'
    },
    {
      'nombre': 'Tres',
      'cargo': 'Cuentas',
      'email': 'tres@gmail.com'
    },
    {
      'nombre': 'Cuatro',
      'cargo': 'Programador',
      'email': 'cuatro@gmail.com'
    }
  ];

  model:any = {};
  model2:any = {};
  hideUpdate:boolean = true;

  addEmpleado():void {
    this.empleados.push(this.model);
    this.msg = 'campo agregado';
    $("#nombre").val("");
    $("#cargo").val("");
    $("#email").val("");
  }

  deleteEmpleado(i):void {
    var answer = confirm('Estas seguro querer eliminarlo?');
    if(answer) {
      this.empleados.splice(i, 1);
      this.msg = 'campo eliminado';
    }
  }

  myValue;
  editEmpleado(i):void {
    this.hideUpdate = false;
    this.model2.nombre = this.empleados[i].nombre;
    this.model2.cargo = this.empleados[i].cargo;
    this.model2.email = this.empleados[i].email;
    this.myValue = i;
  }

  updateEmpleado():void {
    let i = this.myValue;
    for(let j = 0; j < this.empleados.length; j++){
      if(i == j) {
        this.empleados[i] = this.model2;
        this.msg = 'campo actualizado';
        this.model2 = {};
      }
    }
  }
}

En app.component.html:
<div class="container lsg">
    <div class="row">
      <div class="col-sm-8">
        <h1 class="text-center">
          {{titulo}}
        </h1>
      </div>
      <div class="col-sm-4">
        <div class="alert alert-success alert-dismissable" *ngIf="msg">
          <a href="#" class="close" (click)="closeAlert()">
            &times;
          </a>
          {{msg}}
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <img width="300" src="images/logo.jpg" />
      </div>
      <div class="col-sm-8">
        <h2>Crear:</h2>
        <form class="form-horizontal">
          <div class="form-group">
            <label for="nombre" class="control-label col-sm-2">
              Nombre
            </label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="nombre"
                name="nombre" [(ngModel)]="model.nombre"
                placeholder="Escribe el nombre"
              >
            </div>
          </div>
          <div class="form-group">
            <label for="position" class="control-label col-sm-2">
              Cargo
            </label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="cargo"
                name="cargo" [(ngModel)]="model.cargo"
                placeholder="Escribe el cargo"
              >
            </div>
          </div>
          <div class="form-group">
            <label for="email" class="control-label col-sm-2">
              Email
            </label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="email"
                name="email" [(ngModel)]="model.email"
                placeholder="Escribe el email"
              >
            </div>
          </div>
 
          <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
              <button type="submit" class="btn btn-success" (click)="addEmpleado()">
                Guardar
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-8">
        <h2>Listado de empleados: </h2>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>Nombre</th>
              <th>Cargo</th>
              <th>Email</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of empleados; let i = index">
              <td>{{item.nombre}}</td>
              <td>{{item.cargo}}</td>
              <td>{{item.email}}</td>
              <td>
                <a (click)="editEmpleado(i)" class="btn btn-success">
                  Modificar
                </a>
                <a (click)="deleteEmpleado(i)" class="btn btn-danger">
                  Borrar
                </a>
              </td>
            </tr>
 
          </tbody>
        </table>
      </div>

      <div class="col-sm-4" [hidden]="hideUpdate">
        <h2>Modificar:</h2>
        <form class="form-horizontal">
          <div class="form-group">
            <label for="nombre" class="control-label col-sm-2">
              Nombre
            </label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="nombre"
                name="nombre" [(ngModel)]="model2.nombre"
                placeholder="Escribe el nuevo nombre"
              >
            </div>
          </div>
          <div class="form-group">
            <label for="cargo" class="control-label col-sm-2">
              Cargo
            </label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="cargo"
                name="cargo" [(ngModel)]="model2.cargo"
                placeholder="Escribe el nuevo cargo"
              >
            </div>
          </div>
          <div class="form-group">
            <label for="email" class="control-label col-sm-2">
              Email
            </label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="email"
                name="email" [(ngModel)]="model2.email"
                placeholder="Escribe el nuevo email"
              >
            </div>
          </div>
 
          <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
              <button type="submit" class="btn btn-success" (click)="updateEmpleado()">
                Guardar
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>