El bloque básico de construcción de Angular son los componentes, un componente tiene una clase y un template asi como atributos de entrada y salida.
Angular Input
En Angular el bloque básico de construcción son los componentes, la aplicación es un componente, una lista es un componente, un formulario es un componente, etc.
Para poder rehusar esos componentes se pueden parametrizar, la forma mas común de hacerlo es a través de inputs.
Un Input define un parámetro que le puedo pasar al componente omo si fuera un atributo de un tag html.
Angular Output
Asi como tienen entradas los componentes de angular pueden definir eventos de salida, asi el componente padre puede reaccionar a lo que pasa dentro del componente.
De esta forma un componente comunica que algo esta pasando y diferentes usuarios de ese componente pueden reaccionar a estas salidas de acuerdo a su necesidad.
Se sigue un patron Observer y de esta forma se pueden comunicar de forma desacoplada dos componentes.
Ejemplo
Mostramos un ejemplo de uso de estas propiedades. Y un ejercicio muy basico. En este repo esta la consigna y en las pull request se pueden ver varias resoluciones alternativas
Proyección de Contenido
Además de la entrada por input un componente puede recibir un template como con otros componentes para renderizarlos en su interior.
A esto se le llama proyección de contenido, es el comportamiento estandar de los tags de html como div, p y otros que muestran lo que esta contenido entre el tag de inicio y fin.
En angular podemos hacer lo mismo con nuestros componentes (aunque no es el comportamiento por defecto).
Ciclo de vida de un componente
Los componentes tienen un ciclo de vida bien definidos, existen hooks que un componente puede implementar para “engancharse” a los diferentes momentos del ciclo de vida de un componente:
Los mas importantes son:
ngOnInitpara inicializarngOnChangescuando cambia un objeto de los @InputngOnDestroycuando se elimina el componente del DOM
en el video detallamos el resto y se da una explicación y demostración de los mismos
Mas info de Angular
Este post es parte de una serie de videos para la cátedra de Técnicas y Tecnologías Avanzadas de Desarrollo de Software (TTADS). Sobre Angular, en este caso el funcionamiento básico de los componentes, input, output, y el ciclo de vida.
Aca se puede ver la presentacion que se uso para esas clases.
La documentación oficial de Angular la base para empezar a usar el framework.
Acá el canal de youtube de la materia.