Creando una nueva aplicación

Elementos básicos de los

componentes Angular
Contenido
Introducción .......................................................................................................................................3
Creamos el proyecto ..........................................................................................................................3
El objeto Banda ..................................................................................................................................5
Editar el nombre de la banda .............................................................................................................6
Two-way binding ............................................................................................................................6
Importamos FormsModule .............................................................................................................7
Resumiendo .......................................................................................................................................8
Introducción
El plan para esta guía es crear una aplicación que nos ayude a gestionar la lista de bandas/grupos
musicales favoritas.

La aplicación cubre los fundamentos básicos de Angular. Construirán una aplicación básica que
tiene muchas de las características que esperaría encontrar en una aplicación completa basada en
datos: adquirir y mostrar una lista de mandas, editar el detalle de una banda seleccionado y
navegar entre diferentes vistas de bandas.

Utilizará directivas integradas para mostrar y ocultar elementos y mostrar listas de datos de
bandas. Crearán componentes para mostrar los detalles de la banda y mostrará una lista de
bandas/grupos. Utilizará enlace de datos unidireccional para datos de sólo lectura. Agregará
campos editables para actualizar un modelo con enlace de datos bidireccional. Vinculará métodos
de componente a eventos de usuario, como pulsaciones de teclas y clics. Permitirá a los usuarios
seleccionar una banda/grupo de una lista maestra y editarlo en la vista de detalles. Formateará
datos con tuberías. Crearás un servicio compartido para reunir a las bandas/grupos. Y usará el
enrutamiento para navegar entre diferentes vistas y sus componentes.

Aprenderán suficiente Angular básico para empezar y ganar confianza que Angular puede hacer lo
que ustedes necesitan que haga. Cubrirá mucho terreno en un nivel introductorio.

Creamos el proyecto
El primer paso es crear nuestro proyecto usando una ventana de comando como vimos en la guía
anterior.

ng new misbandasfavoritas

veamos el resultado el cual debe ser igual al inicial en la guía 1.

cd misbandasfavoritas
ng serve --open

Lo primero que vamos a hacer es agregar dos propiedades al appComponent, (abrir el archivo
src/app/app.component.ts).
Agregamos la propiedades titulo y banda.
Nota: usen el nombre de su grupo o cantante favorito.

Modificamos el código html de nuestro componente para mostrar un nuevo título y el nombre de
una banda. Abrimos el archivo src/app/app.component.html, borramos todo el código y
agregamos el siguiente código

El navegador se actualiza y muestra el título y el nombre de la banda.

Los corchetes dobles son la sintaxis de unión de interpolación de Angular. Estos enlaces de
interpolación presentan el título del componente y los valores de propiedad de la banda, como
cadenas, dentro de las etiquetas de encabezado HTML. Esto es lo que denominaremos de ahora
en adelante el data binding.

El resultado debe ser algo como…

El objeto Banda
Puesto que necesitamos mayor información de las bandas vamos a convertir la propiedad banda
de una cadena a una clase.

Cree una clase Banda con propiedades: id y nombre. Agregue estas propiedades cerca de la parte
superior del archivo app.component.ts, justo debajo de la declaración de importación.

Y En la clase AppComponent refactorizamos la propiedad banda del componente para que sea del
tipo Banda y, a continuación, iníciela con un id de 1 y el nombre “Heroes del silencio”.

Nota: estos ajustes los realizamos en el archivo del componente app.component.ts

Puesto que modificamos la propiedad banda de una cadena a un objeto debemos actualizar el
template para mostrar la propiedad nombre del objeto banda.

El resultado en el navegador debe ser exactamente igual al anterior. Ya que lo único que
cambiamos fue las propiedades de la clase AppComponent.
Editar el nombre de la banda
Los usuarios deben poder editar el nombre de la banda en un cuadro de texto <input>. El cuadro
de texto debe mostrar la propiedad de nombre de la banda y actualizar dicha propiedad tan
pronto como el usuario escribe.

Necesita un enlace bidireccional (two way binding) entre el elemento de formulario <input> y la
propiedad banda.nombre.

Two-way binding
Debemos modificar la plantilla para agregar el cuadro de texto para escribir el nombre de la
banda.

[(NgModel)] es la sintaxis angular para enlazar la propiedad banda.nombre al cuadro de texto. Los
datos fluyen en ambas direcciones: de la propiedad al cuadro de texto y del cuadro de texto a la
propiedad.

Desafortunadamente, inmediatamente después de este cambio, la aplicación se rompe. Si vemos

en la consola del navegador, vería que Angular informa de que "ngModel ... no es una propiedad
conocida de entrada".
Aunque NgModel es una directiva Angular válida, no está disponible de forma predeterminada.
Pertenece al módulo FormsModule. Debe optar por utilizar ese módulo.

Importamos FormsModule
Abra el archivo app.module.ts e importe el FormsModule desde la biblioteca @angular/forms. A
continuación, agregue FormsModule a la matriz de importaciones de los metadatos de
@NgModule, que contiene la lista de módulos externos que utiliza la aplicación.

Nota: es posible que después de guardar se demore en mostrar el resultado deben verificar la
ventana de la consola y esperar que termine de recompilar

El resultado final debe ser algo como la siguiente imagen:

En el cuadro de texto se puede escribir un nuevo nombre y debe actualizar inmediatamente el

nombre de la banda favorita.
Resumiendo
Hagamos balance de lo que han construido.

La aplicación utiliza los corchetes dobles de interpolación (un tipo de enlace de datos
unidireccional) para mostrar el título de la aplicación y las propiedades de un objeto Banda.

Agregó un enlace de datos bidireccional al elemento <input> utilizando la directiva ngModel

integrada. Esta vinculación muestra el nombre de la banda y permite a los usuarios cambiarlo.

La directiva ngModel propaga los cambios a cada otro enlace del nombre de la banda de forma
inmediata.