Cacher is the code snippet organizer for pro developers

Instalacion de FLASH-MESSAGE:
npm install --save angular2-flash-messages

Despues se importa en app.module.ts:
import { FlashMessagesModule } from 'angular2-flash-messages'; y se agrega en 
providers:
FlashMessagesModule

para usarlo en los componentes se tiene que importar:
import { FlashMessagesService } from 'angular2-flash-messages';

En el componente HTML:
<flash-messages></flash-messages>, en la parte donde se desea sea mostrada la alerta

En el componente:
import { Component, OnInit } from '@angular/core';
//IMPORTACION DEL MODELO CLIENTE
import { Client } from '../../models/Client';
//LIBRERIA PARA LAS ALERTAS
import { FlashMessagesService } from 'angular2-flash-messages';
//PARA REDIRECCIONAR EN CASO DE ERROR O EXITO
import { Router } from '@angular/router';
//SERVICE PARA AGREGAR EL NUEVO CLIENTE
import { ClientService } from '../../services/client.service'; 

@Component({
  selector: 'app-add-client',
  templateUrl: './add-client.component.html',
  styleUrls: ['./add-client.component.css']
})
export class AddClientComponent implements OnInit {
  //INICIALIZACION DEL MODELO CLIENT
  client: Client = {
    firstName:'',
    lastName:'',
    email: '',
    phone: '',
    balance:0
  }

  disableBalanceOnAdd: boolean = false;
  //INYECCION DE LAS DEPENCIAS IMPORTADAS EN EL CONSTRUCTOR
  constructor(
    private flashMessagesService: FlashMessagesService,
    private router: Router,
    private clientService: ClientService
  ) { }

  ngOnInit() {
  }

  //OBJECTO "f" DEL FORMULARIO
  //value, valid => VALOR Y BOOLEAN SI ES VALIDO
  //value: Client, valid: boolean => VALUE EL CLIENT, VALID FLAG DE ERROR
  onSubmit({value, valid}: {value: Client, valid: boolean}){
    //SI ESTA DESHABILITADA LA OPCION DE "BALANCE"
    if(this.disableBalanceOnAdd){
      value.balance = 0;
    }
    //SI NO PASA LAS VALIDACIONES EL FORMULARIO
    if(!valid){
      //ALERTA DE ERROR
      this.flashMessagesService.show('Please fill in all fields', {
        cssClass:'alert-danger', timeout: 4000
      });
      //REDIRECCIONAMIENTO A LA MISMA RUTA
      this.router.navigate(['add-client']);
    } else {
      //USAMOS EL CLIENTSERVICE PARA AGREGAR AL NUEVO CLIENTE
      this.clientService.newClient(value);
      //ALERTA DE EXITO
      this.flashMessagesService.show('New client added', {
        cssClass:'alert-success', timeout: 4000
      });
      //REDIRECCIONAMIENTO A LA RAIZ (DASHBOARD)
      this.router.navigate(['/']);
    }
  }

}