Manual de referencia Angular 2 / 4

1. Pipes................................................................................................................................................. 5
Pipe para utilizar iframes............................................................................................................ 5
Utiles...........................................................................................................................................5
Imgenes.................................................................................................................................5
UpperCase y LowerCase................................................................................................................. 6
Slice................................................................................................................................................. 6
Manipulando arreglos con Slice..................................................................................................6
Utilizando Pipes en *ngFor.........................................................................................................6
Pipe Decimal (Number)...................................................................................................................7
Limitar la cantidad de decimales a mostrar.................................................................................7
Pipe Percent - Porcentaje................................................................................................................. 7
Otros formatos.............................................................................................................................8
Pipe Currency Moneda................................................................................................................. 8
El currency code:........................................................................................................................ 8
Mostrar simbolo de la moneda....................................................................................................8
Obteniendo la parte entera de una moneda.................................................................................9
Pipe JSON........................................................................................................................................9
Pipe Async....................................................................................................................................... 9
Pipe Date Fecha.......................................................................................................................... 10
Formatos disponibles:............................................................................................................... 10
Cambiar fechas a espaol..........................................................................................................10
Pipes personalizados Capitalizar palabras.................................................................................. 11
Argumentos en Pipes.................................................................................................................12
Utilizando el operador REST para obtener los argumentos de un Pipe....................................12
Funcin de capitalizacin..........................................................................................................13
Capitalizando solo si se desea capitalizar................................................................................. 13
Pipe Personalizado DomSeguro..................................................................................................13
2. SpotiApp.........................................................................................................................................15
Crear componentes y servicios usando Angular CLI.....................................................................15
Componentes:............................................................................................................................15
Servicios....................................................................................................................................15
Estructura de un componente....................................................................................................15
Importar el componente creado al app.component.ts................................................................15
Qu podemos hacer dentro de las clases?............................................................................... 15
Declarar variables segn su tipo:..........................................................................................15
Directivas estructurales: *ngIf y *ngFor...................................................................................16
*ngIf..................................................................................................................................... 16
*ngFor.................................................................................................................................. 16
Eventos......................................................................................................................................16
angular-cli.json..........................................................................................................................16
tsconfig.json (Vaco)................................................................................................................. 16
Rutas.............................................................................................................................................. 17
Consideraciones........................................................................................................................ 17
Rutas con Parmetros................................................................................................................18
Recibir parmetros que vengan por la URL: (Video 14 segunda seccin)............................... 18
Servicios.........................................................................................................................................20
Hacer consultas al servidor usando el mdulo HTTP...............................................................20
Autenticacin con Token en Spotify......................................................................................... 21
Subscribindonos a nuestro observable.................................................................................... 21
Recibiendo la data del artista en una sola lnea.........................................................................22
 Emitiendo y escuchando gracias al ngModel............................................................................22
Cmo resolver errores que pueden ocurrir al pedir un dato asincrono.....................................22
Insertar audio usando Angular.................................................................................................. 22
3. Componentes, directivas de atributos, ciclo de vida y ms............................................................23
ngStyle:..........................................................................................................................................23
ngClass:..........................................................................................................................................23
Modificar valores de objetos.....................................................................................................24
Usando procesos asincronos con indicadores de usuario..........................................................24
Directivas personalizadas.............................................................................................................. 25
Enviando parmetros a la directiva appResaltado creada.........................................................25
ngSwitch Multiples opciones con una sola decisin:................................................................. 26
Rutas y Rutas Hijas........................................................................................................................26
Crear componente dentro de otro ya creado anteriormente......................................................26
Creamos el enrutado principal.................................................................................................. 27
Capturar parmetros en una ruta o subruta............................................................................... 27
Creando rutas para navegacin interna..................................................................................... 28
Definir una ruta hija por defecto...............................................................................................28
Creando un archivo app.routes.ts exclusivo para la ruta del usuario........................................29
Obteniendo el parmetro del padre desde las rutas hijas.......................................................... 30
Ciclo de vida completo de un componente....................................................................................31
ngOnInit:...................................................................................................................................31
ngOnChanges:...........................................................................................................................31
ngDoCheck:.............................................................................................................................. 31
ngAfterContentInit:...................................................................................................................31
ngAfterContentChecked:.......................................................................................................... 31
ngAfterViewInit:....................................................................................................................... 31
ngAfterViewChecked:...............................................................................................................31
ngOnDestroy:............................................................................................................................31
Ejemplo de uso:.........................................................................................................................32
Ver video de ejemplo en Udemy para ver el ciclo completo (131):.....................................32
4. Formularios.....................................................................................................................................33
Variables locales........................................................................................................................33
Grupo de objetos.......................................................................................................................33
Clases que automticamente se asignan a determinados elementos de formulario..................33
Usar nombre de campo para verificar su validez......................................................................34
Clases CSS para validacin.......................................................................................................34
ng-untouched........................................................................................................................34
ng-pristine.............................................................................................................................34
ng-valid.................................................................................................................................34
ng-dirty................................................................................................................................. 34
Quitar validaciones por defecto de HTML5............................................................................. 34
Como postear los datos?..........................................................................................................35
Como obtener la data?...............................................................................................................35
Comprobar la validez de un formulario?.................................................................................. 35
Como configuramos un elemento de formulario?...................................................................35
Caja de bananas.........................................................................................................................35
Setear datos por defecto en una sola direccin......................................................................... 36
Combobox (select)....................................................................................................................37
Poner el valor por default (selected).....................................................................................37
Radio:........................................................................................................................................37
Refactorizando el cdigo para el radio button......................................................................38
Checkboxes...............................................................................................................................38
 Aproximacion por Data................................................................................................................. 39
Importar FormGroup, FormControl y Validators......................................................................39
Importar en el app.module el mdulo ReactiveFormsModule................................................. 39
Sintaxis de FormGroup:............................................................................................................39
Relacionar esta informacin con el HTML...............................................................................40
Crear funcin guardarCambios con su contenido................................................................ 40
Enlazar campos de formulario a las propiedades de nuestro objeto forma que es de tipo
FormGroup................................................................................................................................40
Aplicando reglas de validacin.................................................................................................40
Mostrar validaciones HTML................................................................................................41
Otras formas:........................................................................................................................ 41
Usar Clase CSS en las validaciones.....................................................................................41
Aplicar estilos a validaciones anidadas................................................................................41
Cmo anidar objetos para validacin:.......................................................................................42
Cargar Data al formulario.............................................................................................................. 43
Primera forma........................................................................................................................... 43
Segunda forma.......................................................................................................................... 44
Como resetear el formulario con la forma "pristine".....................................................................44
Aadir arreglo de opciones que el usuario pueda ingresar............................................................44
El componente FormArray........................................................................................................45
En la vista..................................................................................................................................45
Aadimos la funcin agregar pasatiempos............................................................................... 46
Modificar la plantilla para iterar sobre el arreglo de pasatiempos............................................46
Validaciones personalizadas.......................................................................................................... 47
Prevenir que un campo tenga un valor determinado.................................................................47
Validar contraseas....................................................................................................................47
Creamos la funcin NoIgual.................................................................................................48
Otra forma de aadir noIgual a password2............................................................................... 48
Modificacin de la funcin noIgual..........................................................................................48
Data: Validadores asncronos.................................................................................................... 49
Creamos un validador...........................................................................................................49
Creamos el elemento a validar............................................................................................. 49
Creamos el procedimiento asincrono................................................................................... 49
Detectar cambios en los valores o estado del formulario o un control..................................... 50
Suscribindonos a escuchar todos los cambios....................................................................50
Suscribindonos a escuchar solo un campo a la vez............................................................ 50
Suscribindonos cuando el status ha cambiado....................................................................50
5. Autenticacin con Auth0................................................................................................................ 51
Comenzando con Auth0 Componentes y Servicios....................................................................52
Instalar Auth0............................................................................................................................52
Crear el Authentication Service................................................................................................ 52
Crear el arcihvo AuthService............................................................................................... 52
Importar el servicio en el navbar.component.ts........................................................................ 53
Refactorizando el Navbar.............................................................................................................. 53
Configuraciones en Auth0 dashboard y uso del servicio...............................................................54
Refactorizar navbar.component.html........................................................................................ 55
Refactorizar el navbar.component.ts.........................................................................................55
Servicio de bloqueo CanActivate AuthGuard........................................................................56
Como protegemos una ruta?........................................................................................................ 57
Obteniendo el perfil de usuario que inici sesin..........................................................................57
Aadimos el profile al componente protegido..........................................................................58
Personalizando el Login y otras opciones......................................................................................59
6. Uso del HTTP - CRUD Firebase................................................................................................60
Iniciando el proyecto..................................................................................................................... 60
Creacin de los componentes........................................................................................................ 62
Modificacin del app.component.html..................................................................................... 62
Creamos las rutas...................................................................................................................... 62
Trabajando con el HTML..........................................................................................................63
Modificamos los botones de los *.component.html..................................................................64
Creando el servicio que realizar las peticiones....................................................................... 64
Modificacin del HTML del hroe:.......................................................................................... 65
Modificando nuestro heroes.service.ts......................................................................................66
Actualizacin de un registro en Firebase (PUT)............................................................................68
Coger valores que vienen por la URL.......................................................................................68
Modificamos el mtodo guardar().............................................................................................69
Obtener un nodo especfico (GET)................................................................................................69
Modificado heroe.component.ts................................................................................................70
Modificamos el heroe.component.html.....................................................................................70
Dejando el formulario en su estado Pristine............................................................................. 70
Obtener listado de todos los hroes (GET)....................................................................................71
Creamos el mtodo getHeroes() en el servicio......................................................................... 71
Modificamos el heroes.component.ts........................................................................................71
Creamos un Pipe....................................................................................................................... 72
Modificamos el heroes.component.html...................................................................................72
Eliminar registros (HTTP DELETE)..........................................................................................73
Creamos la funcin borrarHeroe()............................................................................................ 73
Creamos la funcin borrarHeroe en el servicio.........................................................................73
Creamos el botn Eliminar en el heroes.component.html........................................................ 73
Refactorizamos el componente heroes.component.ts............................................................... 74
Actualizar el Pipe para que est pendiente del ciclo de cambios que haga Angular.................74
Maquillando nuestra aplicacin.....................................................................................................74
1. Pipes
Nos permiten cambiar la presentacin de la informacin que manejamos con Angular.
[elemento a transformar] | [elemento transformador]
Debemos crear una carpeta llamada pipes en app/pipes/. Ah debemos colocar todos nuestros pipes.
Usamos el Angular CLI para generar el Pipe: ng g p pipes/sinfoto. Angular CLI automticamente
aadir las referencias en el app.module.ts
Sintaxis:
Ej.
{{ nombre | uppercase }}
{{ fecha | date: 'y' }} <- solo muestra el ao.
Ej.

Pipe para utilizar iframes

Utiles
Imgenes
[src]="heroe.img" <- interpreta el contenido como un objeto heroe con propiedad img.
[alt]="heroe.descripcion" <- igual que el anterior.

UpperCase y LowerCase
Los usamos para convertir una cadena a maysculas y minsculas respectivamente.
Slice
Permite cortar textos de un texto o arreglos. Eliminaremos las primeras tres posiciones de un texto

Cortamos desde el carcter 0 y deseamos las tres primeras posiciones.

Manipulando arreglos con Slice

Podemos manipular arreglos indicando una posicin de inicio y una posicin de fin.

Utilizando Pipes en *ngFor

Pipe
Decimal (Number)
Nos permite formatear nmeros.
Limitar la cantidad de decimales a mostrar

Otro ejemplo

Pipe Percent - Porcentaje

Nos permite mostrar nmeros a su forma de %. Usa el sistema el api de la internacionalizacin
(Cuando lo veamos con el pipe de currency):

Otros formatos
Pipe Currency Moneda
Es nicamente para mostra nmeros con formato de moneda.
number_expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]

El currency code:
Es una representacin por cada pas. Todas estas representaciones las podemos encontrar en:
https://en.wikipedia.org/wiki/ISO_4217
Para el Per el currency code es PEN.

Mostrar simbolo de la moneda

Obteniendo la parte entera de una moneda

Pipe JSON
Nos muestra
la

representacin json de un objeto javascript:

Pipe Async
Es usado para poder mostrar informacin que viene de observables o promesas.

Pipe Date Fecha

Nos permite configurar fechas, esta es su sintaxis:

Formatos disponibles:
Todos los formatos podemos encontrarlos en esta URL:
https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

Ejemplo:
Cambiar fechas a espaol
Vamos al app.module.ts y hacemos una importacin
import { LOCALE_ID } from @angular/core
Aadimos un objeto al arreglo de providers:

Automticamente cambiar nuestras fechas a

espaol:

Pipes personalizados Capitalizar palabras

Creamos el archivo app/pipes/capitalizado.pipe.ts

Importar el pipe creado en el app.module.ts
Insertar el pipe importado en el arreglo de declaraciones.
El HTML contiene la siguiente informacin:

El resultado es el siguiente:

Argumentos en Pipes
Utilizando el operador REST para obtener los argumentos de un Pipe

Funcin de capitalizacin

Capitalizando solo si se desea capitalizar

Definimos con el siguiente

bloque que solo queremos la primera letra de la primera palabra capitalizada:
Pipe Personalizado DomSeguro
Podemos en este caso por ejemplo manipular el DOM de forma tal que podamos incluir elementos
iframe de forma segura en nuestra aplicacin. Para ello haremos tambin uso de los Pipes.
En el caso de que el cdigo que vayamos a usar para visualizar un iframe viniera de una variable o
un objeto, esto nos causara problemas dado que por seguridad no se ejecutara el video de dicho
iframe. ej.

Ocurre el siguiente
error que
menciona que hay un recurso inseguro:

Para verificar que eso sea seguro debemos crear un Pipe llamado domseguro:

Importamos DomSanitizer del @angular/platform-browser:

Necesitamos declarar el paquete en el constructor:

Configuramos el mtodo transform:

Bypaseando el recurso:

Modificamos el HTML:
2. SpotiApp

Crear componentes y servicios usando Angular CLI

Componentes:
ng g c componentes/nombre_componente -it -is
Donde:
-it = Inline Template
-is = Inline Style

Servicios
ng c s servicios/nombre_servicio

Estructura de un componente
Un componente est compuesto por:
Imports

Configuracin del selector del componente y su referencia hacia el templateUrl, Estilos.

@Component

Exportacin del componente (la clase)

Importar el componente creado al app.component.ts

Todo componente creado debe ser importado en el archivo app.component.ts y luego insertado en
el arreglo de declaraciones. Una vez aadido en ese lugar el componente si deseamos verlo en
funcionamiento deberemos colocarlo en el app.component.html.

Qu podemos hacer dentro de las clases?

Declarar variables segn su tipo:
Ej.

mostrar:boolean = true;
texto:string = "Yo quiero que escuches la imagen de mi alma";
autor:string = "Criollos";
personajes:string[] = ["spiderman", "Venom", "Dr. Octopus"];
Directivas estructurales: *ngIf y *ngFor
*ngIf
Es usado para mostrar u ocultar algn elemento HTML. Esta etiqueta elimina o muestra en el DOM
un elemento HTML, no lo oculta simplemente, hace que el elemento en mencin desaparezca del
rbol del DOM. Ej.

<div *ngIf="mostrar"></div>

Donde mostrar es una variable existente en el cdigo Typescript.

*ngFor
Es usado para repetir elementos HTML. Ej.

<li *ngFor="let personaje of personajes; let i = index">

{{ i + 1 }}- {{ personaje }}

</li>

Nota: let i = index es opcional, pero es usado para realizar enumeraciones.

Eventos
Los clsicos eventos javascript se ejecutan con la siguiente sintaxis:

(evento)=variable | o funcin

Ej.

<button (click)=mostrar = !mostrar>Mostrar / Ocultar</button>

Donde mostrar es una variable del componente.ts

angular-cli.json
Contiene toda la referencia a las libreras y cosas importantes que ocupar nuestra aplicacin.
Usaremos npm para instalar las libreras y en los arreglos styles y scripts referenciamos a esas
libreras que estn dentro de node_modules. Hay que tener cuidado con las dependencias entre
ficheros javascript, como por ejemplo en el caso de Bootstrap, necesita jquery para funcionar. Debe
colocarse primero.
Nota Importante: Si queremos ver los cambios cuando aadamos referencias de archivos css y
javascript en el angular-cli.json es necesario parar el servidor y volver a iniciarlo con ng serve.

tsconfig.json (Vaco)
En este archivo podemos aadir configuraciones para que Atom funcione ms rapido, entre otras
cosas ms. Si deseamos que Atom funcione ms rpido debemos escribir lo siguiente:

},
"exclude": [
 "../node_modules"
],
compileOnSave: false
Con esta confitguracin le estamos diciendo al Angular CLI que no tome en cuenta el directorio
node_modules. Y que no se compile al guardar. Por defecto el servidor de Angular ya compila por
cada vez que se guarda el fichero, con esta configuracin (en true) estamos duplicando la
compilacin por cada vez que se guarde.

Rutas
Consideraciones
Las rutas se crean en el archivo src/app/app.routes.ts el cual es necesario crearlo.

El snniped a usar es ng2-routes

Las constantes app_routes y app_routing deben estar en maysculas.

Importar componentes al archivo de rutas (app.routes.ts)

En los objetos de asignacin de rutas:

en path: 'colocamos el nombre de la ruta', y component: El_Nombre_del_Componente ej

{ path: 'home', component: HomeComponent }

En el ltimo objeto del arreglo de rutas, se direcciona a 'home':

redirectTo: 'home'

Si queremos usar la # en la ruta, debemos aadir a la ltima lnea: , { useHash: true }

Si decidimos no usar la # debemos tener el <base href="/"> en index de nuestra aplicacin

Aadir ruta al app.module.ts:

Importamos la ruta:

import { APP_ROUTING } from './app.routes';

Aadir APP_ROUTING en el arreglo de "imports"

Definir el renderizado de la ruta (En app.component.html):

<router-outlet></router-outlet>
Implementamos la Navegacin y la .claseCSS automtica:

Cada elemento a implementar la navegacin debe tener: [routerLink]="['/pagina']"

El elemento que debe contener la .claseCSS colocar routerLinkActive="active"
Rutas con Parmetros
Acciones a realizar:
Modificar el archivo de rutas de tal forma que se vea as:

path: 'heroes/:id',

Con cdigo esttico:

En la vista (HTML) debemos llamar al [routerLink]="['/heroes', i]" <- el i representa al let i
= index del *ngFor
Con programacin:
En la vista (HTML) haremos:

<button (click)="verHeroe(i)" ..></button>

En el componente importar el angular/router: import { Router } from '@angular/router';

En el constructor del servicio aadir: private router:Router

Fuera del constructor escribimos la siguiente funcin:

verHeroe( idx:number ){
this.router.navigate(['/heroe', idx]);
}

Recibir parmetros que vengan por la URL: (Video 14 segunda seccin)

En el componente que manejar la ruta, importar el ActivatedRoute del angular/router:

import { ActivatedRoute } from '@angular/router'

No es necesario tener la implementacin de ngOnInit.

Declarar en el constructor una variable privada que haga referencia al ActivatedRoute.

Adems en el mismo contructor se hace el llamado al servicio.
constructor (private activatedRoute: ActivatedRoute ) {
this.activatedRoute.params.subscribe( params => {
// console.log(params['NOMBRE_PARAMETRO'])
// aqui podemos llamar a un servicio que nos devuelva informacin segn el
parmetro capturado.
})
}
Ej.
En el

componente de la pgina que recibir el parmetro id:

El HTML del componente de

bsqueda.component.ts utilizar el [routerLink] para poder buscar la ruta del artsta (desde la raiz,
usando el / antes del nombre de la ruta) y redireccionar as a la ruta especficada:

Servicios

Consideraciones:
Crear el respectivo servicio en el directorio de los servicios
src/app/servicios/heroes.service.ts
Podemos hacerlo usando Angular Cli: ng g s servicios/heroes.service.ts

Usamos el snipped de los servicios en Atom

Registrar el servicio en el app.module.ts

 Importamos el servicio

Aadimos el servicio dentro del arreglo de "providers".

Importar el servicio al componente que lo usar

Usamos el snipped para la importacin del servicio ng2import

En el constructor del componente definimos una propiedad privada del tipo del servicio:
private _heroesService:HeroesService. Cuando se ejecute el constructor del componente,
automticamente ejecutar el constructor del servicio.
El constructor se ejecuta antes del ngOnInit.

Un servicio puede tener ms de un export (Caso de ejemplo de exportacin de una interface

Heroe )
Al momento de importar el servicio, podemos poner una coma (,) y seleccionar el otro
elemento exportado: import { Servicio, Heroe } from '../servicio.service';

Hacer consultas al servidor usando el mdulo HTTP

Es necesario importar el mdulo HTTP y el objeto map:
import { Http } from @angular/http;
import rxjs/add/operator/map;
Definir una instancia del mdulo Http en el constructor:

Crear una funcin que reciba un trmino de bsqueda y haga la concatenacin de la query y luego
retorne la respuesta usando el objeto map que devuelve una respuesta la cual ser manipulada por
una funcin de flecha.
Autenticacin con Token en Spotify
Para hacer peticiones al servidor mediante envo de encabezados ser necesario importar el mdulo
Headers del @angular/http, y sumado al anterior mdulo Http, entonces tendramos la siguiente
importacin
import { Http, Headers } from @angular/http;
Creamos una variable que sea instancia de Headers dentro del mtodo getArtistas y hacemos
algunas otras configuraciones:

Subscribindonos a nuestro observable

Es necesario importar el servicio en nuestro app.module.ts. Luego insertamos nuestro servicio en
nuestros providers. Importamos el servicio tambin en el servicio que lo usar y hacemos el
llamado. Ojo que el mdulo http regresa un observable y es necesario subscribirnos al el:

Recibiendo la data del artista

en una sola lnea
Emitiendo y escuchando gracias al ngModel
La notacin [(ngModel)] lleva el nombre coloquial de caja de bananas. Ej.

Es necesario declarar la variable termino en el componente.ts correspondiente:

Creacin del mtodo buscarArtista() dentro del componete.ts correspondiente. Esta funcin recibe
el trmino de bsqueda que se escribe en la caja de texto:

Cmo resolver errores que pueden ocurrir al pedir un dato asincrono.

Ver video 92 del curso de Udemy

Insertar audio usando Angular

3. Componentes, directivas de atributos, ciclo de vida y ms

ngStyle:
Cmo usarlo:
<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>
<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>
<some-element [ngStyle]="objExp">...</some-element>

Ej.
<p [style.fontSize.px]=tamano>
Hola mundo.. esta es una etiqueta
</p>

Donde tamano es una variable numrica que se inicia en 10:

tamano:number = 10;

Podemos jugar con el tamao si hacemos lo siguiente

<button class=btn btn-primary (click)=tamano = tamano + 5>

<i class=fa fa-plus></i>
</button>

<button class=btn btn-primary (click)=tamano = tamano - 5>

<i class=fa fa-minus></i>
</button>

ngClass:
Aade clases en Angular segn una determinada condicin
Como usarlo:

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>
Modificar valores de objetos

Usando procesos asincronos con indicadores de usuario

Creando el marcado para hacer que el cono gire con la clase fa-spin:

Modificando en la clase:

Terminando la modificacin del botn:

Directivas
personalizadas
Es necesario crear un nuevo folder llamado directives dentro de app/
Creamos as:
ng g d directives/resaltado

Automticamente el plugin de Atom aadir la directiva creada al arreglo de declarations en

app.module.ts

Es necesario usar ElementRef del @angular/core e inyectarlo en el constructor. Si necesitamos

trabajar con la directiva de tal forma que pueda estar escuchando lo que ocurra cuando alguien pose
el mouse o haga algn tipo de manipulacin como eventos clic, doble clic, hover, etc, debemos usar
HosListener del @angular/core, este no ser necesario importarlo en el constructor, pero s
inyectarlo en el cdigo con el parmetro del tipo de evento a usar. A continuacin un ejemplo de
cmo usarlo:

Enviando parmetros a la directiva appResaltado creada

Para recibir la variable es necesario importar el mdulo Input de @angular/core y usarlo

habitualmente antes del constructor, pero si se usa despues no hay problema:

De esta forma obtenemos el color que hemos definido en la directiva (orange). Podemos crear un
mtodo que se encargue de hacer el cambio de color. El cambio incluye todo este cdigo:
ngSwitch Multiples opciones con una sola decisin:
Nos permite coger una condicin y aplicar multiples opcione con ella. Para el caso creamos un
nuevo componente llamado ngswitch: ng g c componentes/ngswitch -is. Con el plugin de atom es
posible usar un shorcut llamado ng2-switch.

Esto har que se muestre solo el div correspondiente a info.

Rutas y Rutas Hijas

Es posible en Angular tener rutas como ya las conocemos, pero tambien podemos tener sub-rutas
para ciertos componentes, Cmo los creamos? Veamos a continuacin.
Creamos un nuevo componente: ng g c componentes/home -it -is
Ojo: -it significa inline template, -is significa inline style.

Es necesario siempre usar la pgina de rutas en app/app.routes.ts y importar todos los mdulos
principales que deseamos rutear en la aplicacin principal. Aadimos la ruta en el app.module.ts y
en el app.component.html usamos el <router-outlet></router-outlet> respectivo.
Crear componente dentro de otro ya creado anteriormente
Qu pasara si necesitaramos crear un nuevo componente, pero dentro de uno ya creado
anteriormente? Ser necesario utilizar el flag flat. Por ejemplo crearemos el componente
usuarioNuevo dentro del componente usuario que ya existe en el proyecto:

A continuacin vemos que se cre el componente adecuadamente.

Hagamos cuenta que hemos creado adems de usuarioNuevo, los componentes usuarioEditar y
usuarioDetalle. Entonces tendramos la siguiente estructura:

Creamos el enrutado principal

Podemos crear un navbar que s tendr su estructura aplicada a la aplicacin principal, por tanto
estar dentro de app/componentes/navbar y contendr su propio navbar.component.ts y su
navbar.component.html. Este navbar contiene el men principal de la aplicacin tal cual lo
conocemos hasta ahora. Aadir los [routerLink] y los [routerLinkActive].

Capturar parmetros en una ruta o subruta

Necesitamos crear una estructura que nos permita elegir las rutas hijas, para ello crearemos dentro
del componente usuario la siguiente estructura HTML con los siguientes atributos de angular:

Creando rutas para navegacin interna

Para crear rutas hijas es necesario aadir a la ruta comn y silvestre el atributo children y aadir
las rutas a los componentes que hemos creado anteriormente para el usuario nuevo, usuario editar y
usuario detalle:
Modificamos el usuario.component.html
Aadimos el router-outlet y los routerLinks respectivos:

Las opciones del men de navegacin tendrn lo siguiente:

<button type=button routerLinkActive=active [routerLink]=[nuevo]>Nuevo</button>
<button type=button routerLinkActive=active [routerLink]=[editar]>Editar</button>
<button type=button routerLinkActive=active [routerLink]=[detalle]>Detalle</button>

El router-outlet lo aadimos debajo del men de navegacin para que ah se renderizen todas las
rutas:

Definir una ruta hija por defecto

Es necesario utilizar el path para las rutas normales por defecto, es decir, modificamos el archivo de
rutas y aadimos esa lnea en la rutas hijas tambin:
Creando un archivo app.routes.ts exclusivo para la ruta del usuario
Para este caso crearemos el archivo app/componentes/usuario/usuario.routes.ts, para que este se
encargue de manipular las rutas. El contenido es muy similar al de app.routes.ts, sin embargo ya no
se importa RouterModule de @angular/router y tampoco se exporta el APP_ROUTING porque
no vamos a exportar esta ruta hacia la aplicacin principal (dado que es una ruta hija). Tan sol ose
exporta el (en este caso) USUARIO_ROUTES porque lo necesitaremos asignar en el atributo
children de app.routes.ts. La estructura con las importaciones de los sub-componentes quedara as:

Importamos el usuario.routes.ts:

import { USUARIO_ROUTES } from ./componentes/usuario/usuario.routes

Asignamos en el atributo children de la ruta:

children: USUARIO_ROUTES

Obteniendo el parmetro
del padre desde las rutas hijas
1. Para obtener los parmetros del padre es necesario hacer lo siguiente desde el
usuario.component.ts necesitamos importar el ActivatedRoute de @angular/router. Ojo que
usuario.component.ts forma parte del las pginas principales de la aplicacin principal, por
tanto no es una ruta hija. Desde ah podremos enviar el parmetro hacia las rutas hijas.
 2. Ingresamos a una ruta hija (por ejemplo usuario-nuevo.component.ts) hacemos lo mismo
que en usuario.component.ts pero aadimos el .parent a la hora de solicitar los parmetros
de la ruta. Con eso indicamos que buscamos todos los parmetros del padre:

Ciclo de vida

completo de un componente
ngOnInit:
Se dispara cuando el componente se est inicializando y despues del primer onchanges

ngOnChanges:
Se dispara cuando la data de las propiedades cambian de alguna manera
ngDoCheck:
Durante cada revisin del ciclo de deteccin de cambios.

ngAfterContentInit:
Se dispara despues de insertar algn contenido: <app-algun-contenido>

ngAfterContentChecked:
Se dispara despues de la revisin del contenido intertado.

ngAfterViewInit:
Despues de la inicializacin del componente o de los componentes hijos.

ngAfterViewChecked:
Se dispara despues de cada una de la revisin de los componentes hijos

ngOnDestroy:
Se dispara cuando nos movemos de vista o este elemento se va a destruir, incluso si hacemos un
ngIf del elemento.

Ejemplo de uso:
Importamos las respectivas directivas de @angular/core

Aadimos el implements de todas las dems:

Creamos los mtodos correspondientes a cada uno de los elementos importados:

Ver video de ejemplo en Udemy para ver el ciclo completo (131):

https://www.udemy.com/angular-2-fernando-herrera/learn/v4/t/lecture/6471422?start=0
4. Formularios

Variables locales
Son variables que se usan dentro del template o plantilla. Solo estn disponibles en el template, no
se pueden usar en la clase del componente. Es importante mencionar que estas variables solo
trabajan con objetos y es necesario convertir el elemento html en un objeto y lo hacemos usando
ngModel. La directiva ngModel trabaja conjuntamente con el atributo "name" por tanto es necesario
usarlo.
ejemplo:
<input type="text" class="form-control" id="codigo" name="codigo" ngModel #codigo >

{{ codigo.value }}

Grupo de objetos
Creamos un contenedor y usamos la directiva ngModelGroup y a la variable de grupo debemos
asignarle el ngModelGroup como valor

<div ngModelGroup="contacto" #contacto="ngModelGroup">

</div>

Lo mismo podemos hacer para la etiqueta de formulario (#form es el nombre de la variable

asignada al formulario):
<form #form="ngForm">

{{ form.value | json }}

Clases que automticamente se asignan a determinados elementos de

formulario.
Para visualizar las clases asignadas a un elemento de formulario debemos usar el mtodo
className. Suponiendo que tenemos el siguiente elemento:
<input type="text" name="nombre" id="nombre" class="form-control" ngModel #nombre>
{{ nombre.className }}
Usar nombre de campo para verificar su validez
Si queremos usar el nombre de un campo de formulario para verificar la validez es necesario igualar
el #nombre a ngModel
Ej.
<input type="text" name="nombre" id="nombre" ngModel #nombre="ngModel">

Esto har que "nombre" est disponible dentro del marcado del formulario y podemos hacer
validaciones de la siguiente forma:

<div *ngIf="nombre.touched && !nombre.valid">

Se muestra esto si se toc el campo y el mismo es invlido
</div>
En el caso de "touched", esa validacin cambia cuando el foco se pierde del objeto (osea sale del
objeto hacia otro destino).

Clases CSS para validacin

ng-untouched
El usuario no ha tocado esa caja

ng-pristine
Est con su valor por defecto.

ng-valid
Est pasando todas las reglas de validacin

ng-dirty
Si el campo ya contiene informacin
El atributo "required" hace que un elemento sea invlido por defecto (en la mayora de los casos, a
menos que definamos un valor por defecto)
Podramos usar otros atributos de validacin como minlenght, maxlength, etc.

Quitar validaciones por defecto de HTML5

Para quitar las validaciones HTML5 por defecto escribimos <form novalidate="">

Como postear los datos?

<form (ngSubmit)="guardar()">
Tendremos que crear la funcin guardar:
guardar(){
console.log("formulario posteado")
}
Esto hace que cuando presionemos incluso la tecla Enter, el formulario se enva.

Como obtener la data?

Haciendo una referencia local al formulario:
<form (ngSubmit)="guardar(forma)" #forma="ngForm" novalidate="">
Debemos importar el NgForm para que se sepa que propiedades tiene un determinado campo
import { NgForm } from '@angular/forms'
Tendremos que modificar la funcin guardar
guardar( forma:NgForm ){
console.log( forma );
}
Es posible revisar los errores de los si verificamos los elementos del formulario cuando hacemos el
console.log en la funcin "guardar( forma )".

Comprobar la validez de un formulario?

{{ forma.valid }}

Como configuramos un elemento de formulario?

Debemos usar siempre el atributo "name".

Caja de bananas
usaremos la caja de bananas [(ngModel)]="elnombre"
Setear datos por defecto en una sola direccin
Configuraremos lo siguiente en el componente.ts correspondiente:
usuario:Object = {
nombre: null,
apellido: null,
correo: null,
pais: "Espaa",
codigo: "ESP",
sexo: "hombre",
acepta: false
}

//Extraemos la informacin de un arreglo de objetos:

let paises = [
{
codigo: "CRI",
nombre: "Costa Rica"
},
{
codigo: "ESP",
nombre: "Espaa"
}
];

Incorporando un elemento HTML y referenciando al objeto usuario:

<input class="form-control"
type="text"
placeholder="Pon tu nombre"
name="nombre"
[ngModel]="usuario.nombre"
required>
Para hacerlo bidireccional es necesario usar la caja de bananas: [(ngModel)]="usuario.nombre"

Combobox (select)
Poner el valor por default (selected)
<select name="pais" [(ngModel)]="usuario.pais" class="form-control">
<option value="">Seleccione un pas</option>
<option
*ngFor="let pais of paises"
[value]="pais.nombre"
[selected]="pais.codigo === usuario.codigo"> {{ pais.nombre }} </option>
</select>

Radio:

<label class="custom-control custom-radio">

<input [(ngModel)]="usuario.sexo"
name="sexo"
value="Hombre"
type="radio"
class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Hombre</span>
</label>

<label class="custom-control custom-radio">

<input [(ngModel)]="usuario.sexo"
name="sexo"
value="Mujer"
type="radio"
class="custom-control-input">
 <span class="custom-control-indicator"></span>
<span class="custom-control-description">Mujer</span>
</label>

Refactorizando el cdigo para el radio button

Creamos un arreglo de informacin esttica:
sexos:string[] = ["Hombre", "Mujer"];

Entonces:
<label
*ngFor="let s of sexos"
class="custom-control custom-radio">
<input [(ngModel)]="usuario.sexo"
name="sexo"
[value]="s"
type="radio"
class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">{{ s }}</span>
</label>

Checkboxes
<label class="col-2 col-form-label">Acepta</label>
<div class="col-md-8">
<label class="custom-control custom-checkbox">
<input
[(ngModel)]="usuario.acepta"
name="acepta"
type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Acepta las condiciones</span>
</label>
</div>

Aproximacion por Data

En el componente.ts correspondiente al formulario hacemos:

Importar FormGroup, FormControl y Validators

import { FormGroup, FormControl, Validators } from '@angular/forms';

Importar en el app.module el mdulo ReactiveFormsModule

import { ReactiveFormsModule } from '@angular/forms'; // El FormsModule ya viene por default.

Aadir el ReactiveFormsModule al arreglo de imports.

Sintaxis de FormGroup:
'nombre_campo' : new FormGroup(
'Valor por defecto',
REGLAS DE VALIDACIN,
REGLAS DE VALIDACIN ASINCRONAS)

Crear un elemento del tipo FormGroup:

forma:FormGroup;

constructor(){
this.forma = new FormGroup({
'nombre': new FormControl('Fernando'),
'apellido': new FormControl(),
'correo': new FormControl()
});
}

Relacionar esta informacin con el HTML

Aadir a la etiqueta <form>:
<form [formGroup]="forma" (ngSubmit)="guardarCambios()" novalidate="novalidate">
Crear funcin guardarCambios con su contenido

guardarCambios(){
console.log( this.forma.value );
console.log( this.forma );
}

Enlazar campos de formulario a las propiedades de nuestro objeto

forma que es de tipo FormGroup
<input
class="form-control"
type="text"
placeholder="Nombre"
formControlName="nombre">
Aqu usamos el nombre que hemos configurado del atributo de "this.forma" en typescript.

Aplicando reglas de validacin

Validators.[regla]
Ej:
this.forma = new FormGroup({

'nombre': new FormControl('', Validators.required ),

'apellido': new FormControl('', Validators.required ),

'correo': new FormControl('', [

Validators.required,

Validators.pattern("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$")

])

});

Mostrar validaciones HTML

<div
*ngIf="!forma.controls['nombre'].valid"
class="form-contro-feedback">
 El nombre es necesario
</div>

Otras formas:
forma.controls[nombre].errors?.required
!forma.controls[nombre].errors?.minlength

Usar Clase CSS en las validaciones

<div
*ngIf="!forma.controls['nombre'].valid"
class="form-contro-feedback"
[ngClass]="{ 'has-danger': !forma.get('nombre').valid }">
El nombre es necesario
</div>

Aplicar estilos a validaciones anidadas

Para el caso de validaciones anidadas
[ngClass]="{ 'has-danger': !forma.controls['nombrecompleto'].controls['nombre'].valid }">
Cmo anidar objetos para validacin:
Creamos un objeto:

usuario:Object = {
nombrecompleto: {
nombre: "Fernando",
apellido: "Herrera",
},
correo: "fernandoherrera@gmail.com"
}

Hacemos lo siguiente:

this.forma = new FormGroup({

'nombrecompleto': new FormGroup({
'nombre': new FormControl('', [
Validators.required,
Validators.minlength(3)
]),
'apellido': new FormControl('', Validators.required )
}),
'correo': new FormControl('', [
Validators.required,
Validators.pattern("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$")
])
})
Modificacin del HTML:
<div formGroupName="nombrecompleto">
<div
*ngIf="!forma.get('nombrecompleto.nombre').errors?.required"
class="form-contro-feedback"
[ngClass]="{ 'has-danger': !forma.get('nombre').valid }">
El nombre es necesario
</div>

<div
*ngIf="!forma.get('nombrecompleto.nombre').errors?.minlength"
class="form-contro-feedback"
[ngClass]="{ 'has-danger': !forma.get('apellido').valid }">
Por lo menos 3 caracteres
</div>
</div>

Cargar Data al formulario

Primera forma
this.forma = new FormGroup({
'nombrecompleto': new FormGroup({
'nombre': new FormControl(this.usuario.nombrecompleto.nombre, [
Validators.required,
Validators.minlength(3)
]),
'apellido': new FormControl(this.usuario.nombrecompleto.apellido,
Validators.required )
}),
'correo': new FormControl(this.usuario.correo, [
Validators.required,
 Validators.pattern("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$")
])
})

Segunda forma
Si el objeto usuario responde a la misma estructura del FormGroup, entonces podemos hacer lo
siguiente en el cdigo del componente.ts
this.forma.setValue( this.usuario );

Como resetear el formulario con la forma "pristine"

Diferentes formas de hacerlo:
- this.forma.reset( this.usuario );
- this.forma.reset({
nombrecompleto: {
nombre: "",
apellido: "",
},
correo: ""
});
- this.forma.controls['correo'].setValue("nuevocorreo@gmail.com");

Aadir arreglo de opciones que el usuario pueda ingresar

Como podemos aadir al FormGroup un arreglo de opciones que el usuario pueda ingresar y
angular pueda validarlas a la vez?
Ejemplo:
pasatiempos: ["Comer","Dormir","Correr"]

El componente FormArray
Continuando con el arreglo de opciones anterior, es necesario importar el FormArray
import { FormArray } from '@angular/forms'

this.forma = new FormGroup({

'nombrecompleto': new FormGroup({
'nombre': new FormControl(this.usuario.nombrecompleto.nombre, [
Validators.required,
Validators.minlength(3)
]),
'apellido': new FormControl(this.usuario.nombrecompleto.apellido,
Validators.required )
}),
'correo': new FormControl(this.usuario.correo, [
Validators.required,
Validators.pattern("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$")
]),
'pasatiempos': new FormArray([
new FormControl('Correr', Validators.required )
])
})

En la vista
<div class="form-group row">
<label class="col-2 col-form-label">Correo</label>

<div class="col-md-8" formArrayName="pasatiempos">

<input
formControlName="0"
type="text"
class="form-control">

</div>
 <button
(click)="agregarPasatiempo()"
type="button" class="btn btn-primary">Agregar</button>
</div>

Aadimos la funcin agregar pasatiempos

agregarPasatiempo(){
(<FormArray>this.forma.controls['pasatiempos']).push(
new FormControl('', Validators.required )
)
}

Modificar la plantilla para iterar sobre el arreglo de pasatiempos

<div class="form-group row">

<label class="col-2 col-form-label">Correo</label>

<div class="col-md-8" formArrayName="pasatiempos">

<input

*ngFor="let pasatiempo of forma.controls["pasatiempos"].controls; let i = index"

[formControlName]="i"

type="text"

class="form-control">

</div>

<button

(click)="agregarPasatiempo()"

type="button" class="btn btn-primary">Agregar</button>

</div>
Validaciones personalizadas

Prevenir que un campo tenga un valor determinado

ej.

noHerrera( control: FormControl ): { [s:string]:boolean }{

if( control.value === "herrera" ){
return {
noherrera: true
}
}
return null;
}

En la validacin correspondiente al apellido modificar las validaciones aadiendo un arreglo:

'apellido': new FormControl(this.usuario.nombrecompleto.apellido, [Validators.required, noHerrera] )

Validar contraseas

'password1': new FormControl('', Validators.required)

'password2': new FormControl()
En el caso del passoword, vamos a aadir funcionalidad de validacin a parte:
Creamos la funcin NoIgual

noIgual( control: FormControl ): { [s:string]:boolean }{

if( control.value !== this.forma.controls["password1"].value ){
return {
noiguales: true
}
}
return null;
}

Otra forma de aadir noIgual a password2

this.forma.controls['password2'].setValidators([
Validators.required,
this.noIgual.bind(this.forma)
]);
Es importante mencionar que es necesaria la utilizacin del mtodo bind para indicarle a la funcin
noIgual el contexto de this.forma.

Modificacin de la funcin noIgual

noIgual( control: FormControl ): { [s:string]:boolean }{

let forma:any = this;
if( control.value !== forma.controls["password1"].value ){
return {
noiguales: true
}
}
return null;
}
Data: Validadores asncronos

Creamos un validador
'username': new FormControl('',Validators.required, this.existeUsuario ),

Creamos el elemento a validar

<div class="form-group row">

<label class="col-2 col-form-label">Username</label>
<div class="col-md-8">
<input
class="form-control"
type="text"
placeholder="Usuario"
formControlName="username">
</div>
</div>

Creamos el procedimiento asincrono

importamos el observable:
import { Observable } from 'rxjs/Rx';
existeUsuario( control: FormControl ) : Promise<any>|Observable<any>{ <- al principio esto causa un error porque
devuelve vaco.

let promesa = new Promise(

( resolve, rejec )=>{

setTimeout( ()=> {

if( control.value === "strider" ){

resolve( { existe:true } )

}else{

resolve( null )

}, 3000);

}
 )

return promesa;

En la vista aadir al final

{{ forma.valid }}
<br>
{{ forma.status }}

Detectar cambios en los valores o estado del formulario o un control

Suscribindonos a escuchar todos los cambios
this.forma.valueChanges
.subscribe( data =>{
console.log( data );
})

Suscribindonos a escuchar solo un campo a la vez

this.forma.controls['username'].valueChanges
.subscribe( data=>{
console.log( data );
})

Suscribindonos cuando el status ha cambiado

this.forma.controls['username'].statusChanges
.subscribe( data=>{
console.log( data );
});
5. Autenticacin con Auth0
Creamos el componente navbar, home, precios y protegida con el -is.
El navbar.component.ts debe contener:
El

app.component.ts debe contener:

El archivo app.routes.ts debe contener:

Importamos las rutas en el archivo app.module.ts
Aadimos la navegacin para las rutas home, precios y protegida en el navbar.component.html
utilizando [routerLink] y routerLinkActive tambin.

Comenzando con Auth0 Componentes y Servicios

Ingresamos auth0.com y nos registramos. Cuando hayamos ingresado podremos registrarnos
utilizando el botn New Client:

Le

ponemos un nombre a nuestra App, seleccionamos Single Page Web Application y elegimos
crear. Nos pregunta qu tecnologa estamos usando para nuestra aplicacin web, elegimos
Angular 2.

Instalar Auth0
Nos nuestra cmo instalar Auth0:
npm install save auth0-js
Copiar y pegar el link del CDN:

Crear el Authentication Service

Crear el arcihvo AuthService
ng g s services/auth.service
Importar el servicio en el app.module.ts
Copiar la referencia del AuthService al arreglo de Providers.
Copiar el cdigo proporcioando por la web de Auth0 y reemplazamos todo el contenido del archivo
auth.service.ts.
Importar el servicio en el navbar.component.ts
Import { AuthService } from ../../servicios/auth.service;

Refactorizando el Navbar

Actualmente si vamos a la pantalla de la aplicacin vemos un botn Login como el siguiente:

Al

hacer clic sobre este botn nos muestra el siguiente error:

Hacemos clic sobre Application Settings Page para ver qu ocurri. Es necesario hacer una pequea
modificacin donde dice Allowed Callback URLs. En esa caja debemos ingresar la direccin que
est seleccionada en la imagen anterior: http://localhost:4200/callback.

Guardamos los cambios.

Si intentamos nuevamente hacer clic sobre el botn nos aparecer la siguiente imagen:

Al logearse nos llevar nuevamente a la pgina principal.

Configuraciones en Auth0 dashboard y uso del servicio

Es necesario aadir ms mtodos:
handleAuthentication(): Establece que usaremos el servicio.
setSession(authResult): Es para grabar en el localstorage variables que vienen del servicio.
Logout(): Nos permite deslogearnos.
IsAuthenticated(): Nos permite saber si el usuario est autenticado o no.

Copiamos las 4 funciones, nos vamos al auth.service.ts y lo pegamos.

Refactorizar navbar.component.html

Refactorizar el navbar.component.ts
Servicio de bloqueo CanActivate AuthGuard
Modificar el navbar.component.html de tal forma que solo se muestre la ruta protegida en caso el
usuario est autenticado:

Prevenir ingresar
a una pgina
utilizando un servicio:
ng g s servicios/authGuard
Importarmos el servicio en el app.module.ts y lo aadimos al arreglo de los Providers.

Abrimos el servicio auth.guard.service.ts y realizar las sigiuentes importaciones:

Importamos tambin el servicio AuthService

Implementamos la clase CanActivate

Tambin recibiremos el
next y el state en el mtodo canActivate:
Como protegemos una ruta?
Debemos ir al archivo de rutas y hacer la siguiente refactorizacin:

Obteniendo el perfil de usuario que inici sesin

En el auth.service.ts debemos aadir la palabra profile a la clave scope del objeto auth0:

Aadir el mtodo getProfile(cb)

Aadimos el profile al componente protegido
Importamos el AuthService:
import { AuthService } from ../../services/auth.service;
Aadimos lo siguiente:

En el protegido.component.html debemos colocar:

<pre>
{{ profile | json }}
</pre>

Aadimos el siguiente cdigo:

Personalizando el Login y otras opciones
Ver video 141 de Udemy:
https://www.udemy.com/angular-2-fernando-herrera/learn/v4/t/lecture/6474698?start=0
6. Uso del HTTP - CRUD Firebase

Iniciando el proyecto
El objetivo principal es dominar peticiones get, post, put, delete usando servicios REST. Usaremos
la RestFull API de Firebase.
ng new heroesapp
Vamos a firebase y si tenemos usuario de gmail ya tenemos cuenta en Firebase.
Hacemos clic en agregar proyecto. Ponemos el nombre del proyecto (heroesapp) y el pas (Peru) y
hacemos clic en crear proyecto.
Tendremos la siguiente pantalla:

El

elemento a seleccionar es database. Hacemos clic ah y vamos a la pestaa Reglas. Vamos a

configurar de tal forma que todo el mundo pueda leer y escribir.

Damos clic a Publicar, nos aparecer un mensaje de color rojo indicandonos los peligros de la
configuracion que acabamos de dar a nuestra app. Esto se puede cambiar luego.
Hacemos clic en descartar.
Para empezar creamos la siguiente estructura en nuestra base de datos:

Si hacemos clic sobre la URL esta va a cambiar dependiendo del elemento que seleccionemos. Por
ejemplo si hacemos clic sobre heroesapp-5e938 se mostrar un enlace, si hacemos clic sobre solo
heroes se mostrar otro enlace, y as si hicieramos clic sobre cualquier elemento del objeto heroes.
Estas URL las usaremos para consultar o enviar informacin. Las URL del ejemplo son:
https://heroesapp-5e938.firebaseio.com/heroes

https://heroesapp-5e938.firebaseio.com/heroes/1

https://heroesapp-5e938.firebaseio.com/heroes/1/casa

A cualquiera de estas URL podemos aadirles la extensin .json y se mostrar la inforamcin

respectiva, por ejemplo usaremos el primer enlace con extensin .json en el navegador:
https://heroesapp-5e938.firebaseio.com/heroes.json
Como vemos, obtenemos el contenido en formato json:

Creacin de los componentes

Los componentes a crear sern dos:
ng g c components/heroes -is
ng g c compnents/heroes/heroe -is --flat
Automticamente se aadirn las referencias en el archivo app.module.ts

Modificacin del app.component.html

<div class="container main-container">
<router-outlet></router-outlet>
</div>

Creamos las rutas

import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './components/heroes/heroes.component';
import { HeroeComponent } from './components/heroes/heroe.component';

const APP_ROUTES: Routes = [

{ path: 'heroes', component: HeroesComponent },
{ path: 'heroe/:id', component: HeroeComponent },
{ path: '**', pathMatch: 'full', redirectTo: 'heroes' }
];

export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES);

Trabajando con el HTML
<h1>Heroes</h1>

<hr>

<div class="row">

<div class="col-md-12 text-right">

<button class="btn btn-outline-primary" type="button" name="button">

Nuevo

</button>

</div>

</div>

<div class="row">

<div class="col-md-12">

<div class="table-responsive">

<table class="table">

<thead class="thead-inverse">

<tr>

<th>#</th>

<th>Nombre</th>

<th>Casa</th>

<th>Opciones</th>

</tr>

</thead>

<tbody>

<td></td>

<td></td>

<td></td>

<td></td>

</tbody>

</table>

</div>

</div>

</div>
Modificamos los botones de los *.component.html

<button
[routerLink]="['/heroe', 'nuevo']"
class="btn btn-outline-primary" type="button" name="button">
Nuevo Heroe
</button>

<button
[routerLink]="['heroes']"
class="btn btn-outline-danger btn-sm">
Regresar
</button>

Creando el servicio que realizar las peticiones

Aadimos el ngSubmit al formulario y la referencia al ngForm
<form (ngSubmit)="guardar()" #forma="ngForm">
Importamos el NgForm
import { NgForm } from '@angular/forms';
Creamos el objeto del hroe:
heroe:any = { }
Creamos la interface que obligar a que el hroe tenga cierta estructura:
app/interfaces/heroe.interface.ts
Exportamos la interface siguiente:
export interface Heroe {
nombre: string;
bio: string;
casa: string;
key$?: string; opcional. Viene con el firebase.
}
Importamos la interface en nuestro heroe.component.ts
import { Heroe } from ../../interfaces/heroe.interface;
Seteamos en vez de any, poner Heroe y le ponemos contenido.
heroe:Heroe = {
nombre: ,
bio: ,
casa: Marvel
}

Modificacin del HTML del hroe:

<h3>Hroe <small>nombre...</small></h3>
<button
[routerLink]="['/heroes']"
class="btn btn-outline-danger btn-sm">
Regresar
</button>
<hr>

<div class="row animated fadeIn slow">

<div class="col-md-12">

<form (ngSubmit)="guardar()" #forma="ngForm">

<div class="form-group">
<label for="">Nombre</label>
<input
([ngModel])="heroe.nombre"
name="nombre"
type="text"
class="form-control"
placeholder="Nombre del hroe"
 required>
</div>

<div class="form-group">
<label for="">Casa</label>
<select name="casa" class="form-control" [(ngModel)]="heroe.casa">
<option value="Marvel">Marvel</option>
<option value="DC">DC</option>
</select>
</div>

<div class="form-group">
<label for="">Bio</label>
<textarea name="bio" [(ngModel)]="heroe.bio" class="form-control"></textarea>
</div>
<div class="form-group">
<button type="submit" [disabled]="!forma.valid" class="btn btn-outline-primary btn-
sm">Guardar cambios</button>
</div>
</form>

</div>
</div>

Modificando nuestro heroes.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from "@angular/http";
import { Heroe } from "../interfaces/heroe.interface";
import "rxjs/Rx";
@Injectable()
export class HeroesService {

heroesURL:string = "https://heroesapp-5e938.firebaseio.com/heroes.json";
constructor( private http:Http) { }

nuevoHeroe( heroe:Heroe){
let body = JSON.stringify( heroe );
let headers = new Headers({
'Content-Type': 'application/json'
});

return this.http.post( this.heroesURL, body, { headers } )

.map( res =>{
console.log( res.json());
return res.json();
});
}
}
Actualizacin de un registro en Firebase (PUT)

Creamos una nueva URL de modificacin:

Creamos la funcin de modificacin con el mtodo PUT.

En el heroe.component.ts modificamos para aadir el mtodo de actualizacin. Especificamos la

variable nuevo como un booleano inicializado en falso:

Coger valores que vienen por la URL.

Para esto necesitamos el ActivatedRoute del @angular/router. Lo importamos en el mismo
componente del heroe:

declaramos como privado el activatedRoute dentro del constructor:

y obtenemos el parmetro que recibimos de la URL:
Modificamos el mtodo guardar()

Obtener un nodo especfico (GET)

Este mtodo es el ms fcil de hacer. Solo necesitamos utilizar la segunda URL que hemos
configurado (para PUT) y en el servicio creamos la siguiente funcin:
Modificado heroe.component.ts

Modificamos el heroe.component.html
Aadimos un botn para ingresar un nuevo heroe y dejar el formulario en su estado pristine:

Le hemos
pasado el objeto
de la #forma
a la funcin
agregarNuevo

Dejando el formulario en su estado Pristine

Obtener listado
de todos
los hroes
(GET)

Tomaremos la primer URL que hemos configurado.

Creamos el mtodo getHeroes() en el servicio

Modificamos el heroes.component.ts
Importamos el servicio
inyectamos el servicio en el constructor
constructor( private _heroesService:HeroesService)
Creamos la variable heroes de tipo any.
Hacemos el llamado al mtodo getHeroes para obtener la data.

Creamos un Pipe
Creamos app/pipes/keys
Modificamos el heroes.component.html
Eliminar registros (HTTP DELETE)
Creamos el botn de Editar

Creamos la funcin borrarHeroe()

Creamos la funcin borrarHeroe en el servicio

Creamos el botn Eliminar en el heroes.component.html

Refactorizamos el componente heroes.component.ts

Actualizar el Pipe para que est pendiente del ciclo de cambios que
haga Angular
Esto es para el caso del error que ocurre cuando intentas eliminar un hroe de la lista de hroes.
Pasa que en el ngFor cuando encuentra un hroe que ya no existe, angular revienta dado que no se
enter que ya fue eliminado. Con esto resolvemos el problema.

Esto quiere decir que tiene que estar pendiente del ciclo de cambios que haga angular. Esto lo
hacemos porque cuando eliminamos un elemento de un arreglo, ocurre un error.

Maquillando nuestra aplicacin

Pgina 178: https://www.udemy.com/angular-2-fernando-herrera/learn/v4/t/lecture/6498910?start=0

Resumen:
Es necesario importar el modulo Http y Headers de @angular/http
Es necesario importar la funcin map de rxjs/Rx
Para enviar usando post es necesario enviar un objeto en formato string, para eso usaremos
JSON.stringify( objeto ) y le pasamos el objeto.
Estructura de una peticin POST:
Esta peticin regresa un observable, para ello es necesario retornar la peticin.

let url = "url al recurso rest" <- Esta url podra ser configurada de forma global en la clase, no tiene
que estar necesariamente declarada en el mtodo.
let body = JSON.stringify( heroe ); <- El heroe viene como parmetro al mtodo del servicio.
let headers = new Headers({
'Content-Type': 'application/json'
});

return this.http.post( url, body, { headers } )

.map( res=>{
console.log( res.json()) <- esta es la data que regresa despues de haber hecho
el post.
return res.json();
})

En el componente que llama al servicio es necesario:

1. Importar el servicio
2. declarar el servicio en el constructor.
3. Hacer la llamada al mtodo del servicio que hace el posteo
4. Una vez hecha la llamada, suscribirnos a la respuesta dado que dicho llamado post devuelve un
observable:

guardar(){
this._miServicio.nuevoHeroe( this.heroe )
.subscribe( data=>{
console.log( data ) <- aqu devuelve la data que le devuelve el
servicio.
})
}
Estructura de una peticin PUT:
La estructura es la misma, lo que cambia es el "nodo" hacia donde se enviar la actualizacin. En el
caso de Firebase es necesario estar sobre el nodo que deseamos actualizar (Entiendase "nodo" como
documento a actualizar). Se debe enviar adems en la URL la clave que deseamos actualizar.
Bsicamente trabajaremos con las URL, dado que todo lo dems es lo mismo que con POST pero
en este caso con PUT.

Para acceder a los parmetros de la ruta es necesario usar el mdulo: ActivatedRoute del
@angular/router, inicializarlos en el constructor y usarlo en el mtodo constructor dado que es el
primero que se ejecuta al cargar el script. El objeto "params" retorna un observable por tanto
tambin es necesario suscribirnos a el:

constructor( __otras declaraciones_, private route:ActivatedRoute ){

this.route.params
.subscribe(parametros=>{
console.log( parametros);
this.id = parametros["id"]
})
}

Estructura de una peticin GET:

En el caso de las peticiones GET necesitamos enviar un "id", en el caso de Firebase usamos el
"key$". Es necesario configurar la url de la solicitud indicandole cul es la kek$ y finalizando con
.json

La peticin tiene la siguiente estructura:

return this.http.get( url )
.map ( res=>res.json() );

Esta peticin al final retorna un observable al cual debemos subscribirnos para leer la info:

this._miServicio.getHeroe( this.id )
.subscribe( data => this.heroe = data );