1.

Componentes

1.1 ¿Qué es un componente?

Un componente es una porción independiente y reutilizable de la aplicación que
tiene su propio código HTML, estilos CSS y lógica de renderizado.

1.2 Crear un componente

Para crear un componente hay que ejecutar el comando

ng generate component <Directory>/<ComponentName>

1.3 Estructura de un componente

1.4 Data Binding
Data Binding es un concepto que hace referencia a la sincronización entre la
interfaz de usuario y los datos de la aplicación.
Angular soporta los siguientes tipos de data binding:

1.4.1 Interpolación
La interpolación se usa simplemente para mostrar el valor de una propiedad.

1.4.2 Binding de propiedades

El binding de propiedades se usa para vincular un atributo de una etiqueta con
una propiedad de la clase del componente.

En este ejemplo, se vincula el atributo src de la etiqueta img con la propiedad

imageUrl del objeto showComic.
Otro uso muy común es el de desactivar elementos en base a una propiedad
booleana.
1.4.3 Binding de eventos
El binding de eventos se usa para vincular un evento HTML sobre un elemento
de la página con un método de la clase del componente.

1.4.4 Binding de clases

El Binding de clases se usa para agregar o eliminar dinámicamente clases CSS.
En el siguiente ejemplo se usa el binding de clases para settear (o no) la clase
“special” según el resultado de una expresión (en este caso, una propiedad
booleana).

Hay que tener en cuenta que el binding de clases permite agregar o eliminar
sólo 1 clase. Si quisiera hacer lo mismo pero con más de 1, tendría que usar la
directiva NgClass.

1.4.5 Two-way Data Binding

El Two-way Data Binding consiste en vincular una propiedad de la clase del
componente a un control de tipo input de un formulario, de forma que si el
usuario modifica el input, se modifica el valor de la propiedad, y si el valor de la
propiedad se modifica desde dentro de la clase, entonces se modifica el valor
del input.
Esto significa que la modificación del dato puede nacer tanto desde la UI como
desde la propia clase del componente.

Es muy conveniente usar el Two-way Data Binding con elementos de formulario

de tipo <input> y <select>.
 2. Directivas

2.1 ¿Qué es una directiva?

Una directiva es una expresión Angular que se usa como si fuera un atributo
HTML y que permite manipular los elementos del DOM.
Hay 2 tipos de directivas: estructurales y de atributo.

2.2 Directivas estructurales

Las directivas estructurales son directivas que permiten manipular el DOM
agregando o eliminando elementos.

2.2.1 Directiva *ngIf

La directiva *ngIf se usa para agregar o eliminar un elemento (y todo su
contenido) en el DOM según el resultado de una expresión booleana.

Este ejemplo va a mostrar (agregar al DOM) el valor de la propiedad name del

objeto hero sólo cuando este sea distinto de null.
En el caso de esta directiva, hay que ver si, por temas de performance, conviene
más usarla o si es mejor ocultar el elemento usando una propiedad booleana.

2.2.2 Directiva *ngFor

La directiva *ngFor muestra tantas veces un elemento (y todo su contenido)
como ítems tenga la colección especificada.

Este ejemplo hace que se muestren tantos elementos <li> como objetos haya
en la colección heroes.
Esta directiva también tiene una sintaxis especial que permite obtener el índice
del elemento actual:
2.2.3 Directiva ngSwitch
La directiva ngSwitch permite mostrar uno de varios elementos según el valor
de una propiedad de la clase del componente.

2.3 Directivas de atributo

Las directivas de atributo se usan para cambiar la apariencia o el
comportamiento de un elemento del DOM.

2.3.1 Directiva ngClass

La directiva ngClass se usa para asignar o desasignar dinámicamente una o
varias clases CSS a un elemento del DOM.
Hay 2 formas de usar esta directiva:

1) Usar un objeto que contenga las clases CSS que se van a aplicar.
2) Indicar explícitamente que cuales clases tienen que aplicarse y cuales no.
En este caso hay 3 formas de indicar las clases: con un string, un array o un
objeto.

2.3.2 Directiva ngStyle

La directiva ngStyle se usa para asignar o desasignar estilos dinámicamente a
un elemento del DOM.
Hay 2 formas de usar esta directiva:

1) Usar un objeto que contenga los estilos CSS que se van a aplicar.

2) Indicar explícitamente que cuales son los estilos CSS que se van a aplicar
usando una lista de pares clave-valor separados por comas.
En cada par clave-valor, la parte correspondiente al valor puede ser una
expresión.
 3. Servicios

3.1 ¿Qué es un servicio?

Un servicio es una clase TypeScript con el decorador @Inject que actúa como
un proveedor de datos. Encapsula un conjunto de funcionalidades relacionadas
y que pueden ser usadas por cualquier componente de la aplicación.
Normalmente los servicios se usan para encapsular peticiones HTTP a las API
Rest con las que la aplicación tiene que comunicarse, validar datos de entrada
del usuario, etc.

3.2 Crear un servicio

Para crear un servicio hay que ejecutar el comando

ng generate service <Directory>/<ServiceName>

3.3 Estructura de un servicio

Si el servicio va a hacer peticiones HTTP entonces hay que:

1) En el app.module.ts, importar el módulo HttpClientModule y ponerlo en la

sección de imports.

2) En la clase del servicio, importar la clase HttpClient e inyectar el el

constructor un objeto de este tipo.

3) Usar los métodos get(), post(), put() y delete() del objeto de tipo HttpClient
para hacer las peticiones HTTP.
 4. Pipes

4.1 ¿Qué es un Pipe?

Un Pipe es una construcción de Angular que recibe un dato como entrada y lo
devuelve con un formato específico.

4.2 Pipes provistos por Angular

Angular proporciona los siguientes Pipes:

4.2.1 DatePipe
Este pipe recibe una fecha y la devuelve con el formato especificado.
4.2.2 CurrencyPipe
Este pipe recibe un número y lo transforma en un string con formato de
moneda.
4.2.3 UpperCasePipe y LowerCasePipe
Los pipes uppercase y lowercase recibe un string y lo devuelve en mayúsculas y
en minúsculas respectivamente.

4.2.4 JsonPipe
Este pipe recibe un objeto y devuelve un string con su representación en
formato JSON.
4.2.5 SlicePipe
Este pipe recibe un array o un string y devuelve el mismo tipo de dato pero sólo
con los elementos indicados.

Ejemplo donde el dato de entrada es un array:

Ejemplo donde el dato de entrada es un string:

4.2.6 PercentPipe
Este pipe recibe un número y los transforma en un string con formato de
porcentaje.
4.2.7 DecimalPipe
Este pipe recibe un número y lo devuelve como string con el formato indicado.
4.3 Pipes personalizados
Para crear un Pipe hay que ejecutar el comando

ng generate pipe <Directory>/<PipeName>

Esto genera una clase con el decorador @Pipe que implementa la interfaz
PipeTransform. Para indicar lo que queremos que haga el pipe, hay que
implementar el método transform de esa interfaz. El primer parámetro de este
método tiene que ser el dato que el pipe va a recibir como entrada (es decir, el
que va antes del símbolo |), mientras que los demás parámetros son opcionales
y son los que van después del nombre del pipe.

El metadato name del decorador @Pipe se usa para especificar el nombre con el
que se va a usar el pipe en el código.
 5. Routing

6. Módulos

¿Qué es un módulo?
Un módulo es un conjunto de componentes, servicios, pipes, clases, interfaces,
etc. relacionados entre sí y agrupados bajo un nombre.

Crear un módulo
Para crear un módulo hay que ejecutar el comando

ng generate module <Directory>/<ModuleName>