1 of 34

Angular

Components

2 of 34

Angular - Arquitectura

3 of 34

Qué es un Component?

4 of 34

5 of 34

Componentes en Angular

Los componentes son la manera en que construimos apps en Angular, dividiendo la funcionalidad en pequeñas piezas que luego al unirlas construyen una vista de un usuario.

​

  • Cada parte de nuestro app va a ser un componente.
  • Son reutilizables :)

componente

componente

componente

App

​

componente

6 of 34

Componentes

Un componente Angular está compuesto por tres partes:

COMPONENTE

TS

LÓGICA

HTML

TEMPLATE

CSS

ESTILO

7 of 34

Componentes y atomicidad

Los componentes siguen un diseño atómico.

https://blog.maestriajs.com/blog/angular/Angular-Crear-Componentes/

8 of 34

Estructura de un Componente

En Angular, los componentes son una clase acompañado con un @decorator

selector: Como vamos a incluir nuestro componente.

templateUrl: El html que vamos a cargar en nuestro componente.

styleUrls: Las hojas de estilo de nuestro componente.

index.html

app.component.ts

9 of 34

Cargar un componente

  • Para poder cargar el componente, lo tenemos que declarar en el app.module.ts

angular-cli lo hace por nosotros cuando creamos un componente nuevo!

Este es el root component

Declaro todos los componentes que voy a usar

10 of 34

Template del Componente

  • El template es mayormente HTML.
  • También se usan directives de Angular para poder hacer diferentes cosas. (Coming soon!)
  • Para mejorar la separación, lo ponemos en otro archivo.

​

​

11 of 34

Manos a la obra

12 of 34

Nuestro primer componente

  • El primer componente que vamos a necesitar es “App Component” (que ya esta creado)

​

app.component.html

app.component.ts

13 of 34

Interpolation

  • Las llaves {{ }} nos permiten usar propiedades definidas en el componente y mostrarlas en el template.

app.component.html

app.component.ts

14 of 34

Proyecto “The Brewery” - Diseño

  • �

​

Lista de Cervezas

Footer

Carrito de Compras

Menu

Logo

15 of 34

Pensemos en Componentes

  • Si una app de Angular se construye en componentes, que componentes se les ocurre que creemos?

16 of 34

Pensemos el app.component template

Miremos el layout de cómo debería ser la homepage de nuestra App Angular.

  • Qué sería un componente?
  • Qué sería contenido estático?�

​

Lista de Cervezas

Footer

Carrito de Compras

Menu

Logo

Componentes

Contenido Estatico

​

​

17 of 34

Pensemos el app.component template

Hagamos un diagrama de cómo debería ser la homepage de nuestra App Angular.

  • Qué sería un componente?
  • Qué sería contenido estático?�

​

Lista de Cervezas

Footer

Carrito de Compras

Menu

Logo

Componentes

Contenido Estatico

  • Lista de cervezas
  • Carrito de compras
  • Logo
  • Menu
  • Footer

18 of 34

Hagamos la Home Page

  • Vamos a usar Bootstrap (lo incluimos)
  • Armemos la estructura de columnas
  • Pongamos el contenido estático�

19 of 34

Creemos el componente - Lista de Cervezas

Creemos el componente nuevo usando angular-cli

  • Ejecutamos� ng generate component beer-list�ó la versión corta:� ng g c beer-list
  • Esto nos crea una carpeta beer-list con todo lo que necesita nuestro componente.

​

20 of 34

Revisemos el componente

  • Nos lo creo con el selector app-beer-list
  • Buena práctica usar prefijos por app, para evitar colisiones con bibliotecas
  • El template solo muestra el “beer-list works!”
  • angular-cli nos agregó todas las dependencias en app.module.
  • Probemoslo, agregandolo en el lugar del grid que dejamos listo.

https://angular.io/guide/styleguide#component-custom-prefix

21 of 34

Modifiquemos el Template

  • Necesitamos una lista de cervezas, pero es una lista o una tabla?

22 of 34

Modifiquemos el Template

Supongamos que para la tabla de cervezas necesitamos

    • Nombre: El nombre comercial de la cerveza.
    • Tipo: El estilo de cerveza.
    • Precio: EL precio por unidad.
    • Stock: La cantidad de cervezas en stock.

23 of 34

Flujo de datos entre JS y DOM

24 of 34

Binding de variables

  • Ahora vamos a hacer el binding de una cerveza.
  • Creamos una propiedad en el componente.
  • Usamos interpolación para mostrarlo en la tabla.

25 of 34

Agregar una imagen

  • Cómo hacemos para agregar una imagen a nuestras cervezas?
  • Listemos los pasos:
    • TBC

26 of 34

Beer-list Component Template

  • Podemos hacerlo con interpolación.

​

​

  • Hay una sintaxis especial que también se puede usar

27 of 34

Property Binding

El property binding nos permite relacionar componentes con propiedades del DOM.

  • Usamos corchetes [] en lugar de llaves {}.
  • Los corchetes le dicen a Angular que setee esta propiedad del elemento a la propiedad de nuestro componente.
  • Si la propiedad del componente cambia, entonces cambia el DOM.

28 of 34

​

LISTO!

Nuestro primer componente Angular

29 of 34

Ejercicio

Crear el componente del carrito (o el segundo componente de tu página)

30 of 34

Qué pasa si creo una clase css para poner estilo a la tabla, cuyo nombre está usado en el app component?

31 of 34

Hagamos la prueba

  • Creemos la clase resaltar, en app.component.css
  • Tratemos de usarla en app.component.html y en beer-list.component.html

​

  • Probemos crear una class resaltar en beer-list.component.css y usemosla en beer-list.component.html

32 of 34

Estilos en Componentes

  • Los estilos que creemos en las hojas de estilos de nuestros componentes, se auto limitan a nuestro componente.
  • No tenemos que preocuparnos si estamos pisando otro estilo.

33 of 34

A trabajar un poco...

  • Creen el componente del Carrito (cart).
  • Hagan el HTML del template.
  • Prueben crear una misma clase de css en app.component.css y en cart.component.css, para ver como se auto limita el estilo al componente.

34 of 34

Referencias