Menu

¿ Como crear un componente en Angular ?

angularcomponentes - November 13, 2018 por Carlos Rojas | Edita este Post.
Angular CLI6.1.1

Los componentes son la manera en que construimos nuestras Apps diviendo la funcionalidad en pequeñas piezas que luego al unirlas construyen una vista de un usuario.

¿ Que es un componente en Angular ?

Un componente en Angular es una combinación de un archivo html con un ts y algunas veces scss para crear un elemento con caracteristicas propias tanto de comportamiento como de apariencia que se puede mostrar en un navegador. Lo puedes pensar como en una pieza de lego la cual vas juntando con otras piezas de lego para formar algo interesante para interactuar con un usuario.

Adicionalmente, si has visto las otras tecnologias lideres en el area de Frontend en la actualidad tambien utilizán un acercamiento de Web components y esto me hizo investigar un poco mas sobre el porque este enfoque tenia sentido y encontre algo escrito por Brad Frost en el cual el plantea que los Web Componentes obedecen a un sistema que el ha llamado Diseño Atomico.

¿ Que es el Diseño Atomico ?

El diseño atomico es una metodologia para crear sistemas de diseño. Existén 5 distintos niveles en el diseño atomico:

Atomos. Son los bloques elementales de la materia. Aplicados a nuestras interfaces Web los atomos son nuestras etiquetas HTML, tal como etiquetas de formularios, un input o un button.

Moleculas. Las moleculas son un grupo de atomos juntos que forman un elemento compuesto que tiene sus propias proiedades y sirve como piedra angular de nuestro diseño atomico.

Podemos pensar por ejemplo en los atomos label, input y button los cuales por si solos no son muy útiles, pero si los conviertes en una molecula puedes crear algo super útil como un formulario de busqueda.

Organismos. Los organismos son grupos de moleculas unidas para formar algo relativamente complejo de una interfaz.

Ir construyendo de moleculas a organismos fomenta la creación de componentes standalone, portables, y reusables.

Plantillas. Las plantillas son grupos de organismos unidos para formar paginas.

las plantillas son concretas y proveen de contexto a todas las moleculas y organismos abstractos.

Paginas. Las paginas son instancias especificas de las plantillas.

Las paginas son el más alto nivel de fidelidad y es donde nuestros usuarios pasaran la mayoria del tiempo porque son el resultado mas tangible.

Volviendo a Angular los componentes estan acompañados del decorador @Component y tiene un aspecto asi:

@Component({
  selector: 'mi-componente',
  templateUrl: 'mi-componente.html',
  styleUrls: ['mi-componente.scss']
})

¿ Como creamos un Componente ?

Crear un Componente es muy facil solo debemos utilizar Angular CLI y ejecutar el siguiente comando.

$ ng generate component mi componente.

y de esta manera solo debes importar este componente en los otros bloques donde desees utilizarlo y en la plantillas hacer algo como:

<mi-componente></mi-componente>

Bueno esto es todo por el dia de hoy, espero haya sido de utilidad :)

¡Compártelo!