Componente

Si miramos un componente desde una definición muy básica que es un elemento que compone a un todo y si lo llevamos a un punto de vista anatómico del ser humano, este puede ser un brazo, una pierna, etc.

Un componente es un elemento reutilizable. Puede ser desde un elemento HTML como un <button> hasta una lista (<ul><li></li></ul>), un <header>, un <section>, o un conjunto de etiquetas o elementos <div> que tengan una funcionalidad en particular.

Un componente en Angular es un elemento que está compuesto por:

• Un archivo que será nuestro Template (app.component.html), el cual es nuestro HTML, que es el que se va a visualizar en la interfaz de usuario, la vista o en términos más simples lo que vas a ver en la página.
• Un archivo de lógica, la cual es la que pondremos en un archivo .ts (como por ejemplo app.component.ts), ese archivo debe incluir una clase y esta es la que va a contener las propiedades que se van a usar en la vista (HTML) y los métodos que será las acciones que se ejecutarán en la vista. En este archivo de lógica también se incluye una metadata, que es definida con un decorador, que identifica a Angular como un componente.
• Un archivo para el CSS (podemos usar un preprocesador como SASS o LESS), donde incluiremos los estilos, lo que nos ayuda a hacer bonita nuestra aplicación.

Como crear un Componente

Inicialmente creamos un proyecto nuevo, luego accedemos a la carpeta de dicho proyecto.

Utilizamos la CLI de angular para esto, escribimos en la terminal ng g c path/component-name

Podemos observar nuestro componente creado en la siguiente ruta del proyecto

Podemos llamar a este componente creado desde el componente base (app.componente.html). Un componente se comporta como una etiqueta html pero creada por nosotros. En este caso, nuestro componente puede ser llamado por el nombre app-img puesto que así está asignado en el selector

Procedemos a llamar nuestro componente:

y ejecutamos nuestra app con el comando ng serve en la terminal.