Capítulo 4 - Compilación
Capítulo 5 - NgModules
Capítulo 6 - Directivas
Capítulo 7 - Componentes Avanzados
Capítulo 8 - Router
Capítulo 9 - Inyección de Dependencias
Capítulo 10 - LifeCycle
Capítulo 11 - Pipes
Capitulo 12 - HTTP
Capítulo 13 - UI AngularMaterial \/ PrimeNG
Final
3 - Componentes

Componentes

Como bien mencione anteriormente, Angular es un arbol de Componentes, por lo tanto, una de las cosas mas importantes para entender y poder desarrollar con este fantastico framework es entender los componentes.
Un componente consta de 3 partes:
  • Estructura ( HTML )
  • Estilos ( CSS )
  • Funcionalidad (TS /JS)
Vamos a pasar por todos los pasos de este Componente basico:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
En la primera linea, vemos que hace un "import", lo que quiere decir esto es que va a traer el "Component" que esta en '@angular/core'... Sigamos bajando esto mas a la realidad...
En @angular/core => estan parte de las funcionalidades y objectos que tiene el framework, por lo tanto de todas las que tiene va a traer "Component".
Para los que vienen de programación orientada a objetos, esto les parece algo comun (importar una funcionalidad) ahora los que vienen mas del frontend (epoca de jquery o demas) estan mas acostumbrados que con traer algo en un <script> ya se podia utilizar en cualquier lado.
Pero en Angular no es asi, lo que vamos a hacer en nuestros componentes es solamente importar lo que necesitamos para poder utilizarlo en ese momento.
@Component() es un annotation, es lo que hace es enriquecer a la metadata de la clase que creemos para que termine siendo un componente web que el navegador entienda. Este recibe un json con datos, donde los principales son:
selector => es quien se encarga del "nombre" del tag del componente... por ejemplo este es <app-root>, pero solo vamos a poner el nombre, ya que de los tags se encarga angular.
template => en template (no esta en el ejemplo), podemos poner una porcion de html directo en nuestro componente, con los apostrofes frances ` (son de arriba a abajo, de izquierda a derecha) podemos utilizar el multilinea para nuestro html.
templateUrl => a diferencia del "template" aquí vamos a poner la dirección y el archivo donde se encuentra la porcion de HTML que dara la estructura .
StyleUrls => aquí vamos a tener que poner un array de estilos para el componente... como bien comente anteriormente tenemos un css de estilos globales, que afectan a todo el proyecto, los estilos que pongas en este componente van a estar y ser utilizados solo para el mismo.
Aclaración: vamos a ver mas cosas sobre este annotation pero por ahora con esto estamos bien!
Y por ultimo tenemos las clase exportada, que le va a dar vida a nuestro componente.
Esta clase no tiene que tener absolutamente nada para que funcione el componente, pero obviamente nosotros necesitamos que tenga funcionalidad...
Esta clase va a tener el binding con el html para dar funcionalidad en la vista, por lo tanto, las variables sin declarar, van a ser las variables que encontremos en el html, como asi las funciones tambien.
En este ejemplo podemos ver que tiene
title = ' app works!';
y en el html vamos a ver
{{title}}
que es el "binding" o la "conexion" entre la clase y el html.
Creo que es hora de ver el HTML de este componente.
<h1>
{{title}}
</h1>
SI, lo se , es super basico... pero estamos viendo lo principal de un componente para poder ir avanzando poco a poco. Entonces como les dije... tenemos el binding gracias a las doble llaves, y eso hace el resultado final!
En un par de capitulos mas adelante, vamos a ver "componentes avanzados" en donde le sacaremos el jugo maximo al componente, pero creo que es importante ver algunas cosas antes de avanzar muy a fondo con nuestro componente, por eso este capitulo va a "no ser tan grande" capaz que como el de componentes avanzados u otros capitulos pero seria como un poquito mas del capitulo de primeros pasos...

Pero espera!! Todavia no termino !!

Cuando la aplicacion empieza a crecer los componentes se vuelven mas complicados y van a necesitar de otras cosas... como por ejemplo conectarse con un servicio rest o algun otro servicio.
Como tambien podrian estar calculando alguna funcion, o tienen que reaccionar mediente algun cambio fuerte... por lo tanto vamos a necesitar que ciertas funcionalidades sean mas "Common" con el resto del proyecto... el tema es que los componentes son "shadows" o "encapsulados" las funcionalidades de cada componente le pertenecen solo y nada mas que al componente y eso hace que no se pueda compartir la funcion, a pesar de