Última actualización: 6 abril, 2023TEN EN CUENTA QUE...
En este artículo vamos a estudiar a fondo un pilar básico de Angular: los componentes. Si acabas de aterrizar aquí y no tienes ni idea de Angular, te recomiendo que eches un vistazo a esta introducción a Angular antes.
Introducción
Para desarrollar el contenido de este artículo necesitamos un proyecto de Angular en su estado inicial, con todas sus configuraciones intactas. Si no sabes cómo iniciar un proyecto con Angular, en el post de arriba tienes las instrucciones necesarias, pero aquí va un resumen:
1. Instala NodeJS. Para comprobar si ya lo tienes, utiliza el comando node -v
2. Instala la CLI de Angular con el comando npm install -g @angular/cli
3. Navega con tu terminal hasta un directorio de tu pc donde quieras crear tu proyecto con Angular y usa el comando ng new [nombre-de-tu-app]
4. Navega hasta tu carpeta recién creada con el comando cd [nombre-de-tu-app]
5. Inicia un servidor local con el comando ng serve -o. Eso abrirá tu proyecto en el puerto local 4200, normalmente.
Con esto hecho, ya tenemos nuestro proyecto visible en el navegador, que, en la versión 8 de Angular (la que estoy usando para este artículo), debería tener este aspecto:
Editando nuestra app
Para empezar a editar Angular, vamos al archivo app.component.html y borramos todo su contenido. A continuación escribimos un título, por ejemplo:
Si guardas, ya deberías verlo en tu navegador. ¿Pero cómo sabe Angular que debe mostrar el contenido de ese archivo en el navegador? 
En realidad no es el contenido del app.component.html el que se muestra en la página, sino el del index.html. El index.html es esa SPA de la que hablamos en el artículo de introducción a Angular. Echémosle un vistacillo.
Verás que en el <title> está el título que ves en la pestaña de tu navegador, en mi caso MyFirstApp. Pero lo que más nos interesa es esa etiqueta extraña <app-root>. Prueba a añadir cualquier texto entre el <app-root>, por ejemplo:
Verás que en tu web se sigue mostrando "I'm a title in the AppComponent". Aunque durante algunos mili-segundos (mientras se carga la app), quizás puedas ver "Trying Angular". 
<app-root> no es un elemento HTML típico, sino uno customizado, creado automáticamente por Angular la primera vez que generamos el esqueleto de una app con Angular, como parte del componente app (la carpeta app). Es el componente más importante, ya que conecta todas las piezas de nuestra app.
Si nos fijamos en el archivo app.component.ts, ahí veremos la propiedad selector, cuyo valor es app-root, y no por casualidad. Así es como Angular sabía qué contenido mostrar en el index.html, porque el app-root es una etiqueta HTML que representa a todo un componente (el AppComponent). Al añadirla al index.html, Angular ya sabe de qué hilo tirar. 
Pero nos falta una pieza clave, y es entender cómo arranca una aplicación hecha con Angular. Para entender esto, fijémonos en el código fuente de nuestra app en el navegador.
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyFirstApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>trying Angular</app-root>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>
Efectivamente, es muy parecido al código del index.html, salvo por los scripts del final, que son inyectados por la CLI automáticamente cuando Angular despliega una app en el navegador. Esto sucede concretamente cada vez que guardamos nuestra app, porque ésta se re-compila (siempre y cuando tengas abierta tu terminal con el comando ng serve ejecutándose).
En ese proceso de compilación, Angular transforma y "empaqueta" todo el código TypeScript de la app (el que hayamos escrito nosotros más otros archivos contenidos en Angular), produciendo unos paquetes finales (en inglés, bundles) de código JavaScript (en adelante, JS). Esos bundles son inyectados en la versión final de nuestra app, que es la que está visible en nuestro navegador.
Uno de esos archivos que Angular transforma es el main.ts. Echémosle un vistacillo. La línea más importante es esta:
porque ahí es donde se especifica el punto de arranque de nuestro proyecto. Esto es como seguir miguitas de pan, así que vamos a continuar 
. Empezar a editar una app es uno de los muchos temas clave que aprendí en este fantástico curso de Angular.
Desde vsCode, si haces click sobre el AppModule, te llevará al archivo app.module.ts. Y ahí es donde se cierra el círculo. Porque ahí tenemos un array:
que nos indica con qué componente se debe iniciar nuestra app (por defecto, el AppComponent).
CONTENIDO RESTRINGIDO
El resto del contenido es sólo para miembros del Club ACTech. Puedes unirte aquí o iniciar sesión si ya eres miembro.
THE END!
¡Y con esto finaliza esta guía básica sobre componentes en Angular! 
Si te queda alguna duda, ¡nos vemos en los comentarios!
Sobre la autora de este post
Soy Rocío, una abogada reconvertida en programadora. Soy una apasionada de aprender cosas nuevas y ferviente defensora de que la única manera de ser feliz es alcanzando un equilibrio entre lo que te encanta hacer y lo que te saque de pobre. Mi historia completa, aquí.
Más recursos de aprendizaje
En mi experiencia, la manera más eficaz para aprender Angular es combinando varias vías de aprendizaje. Uno de mis métodos favoritos son los vídeo-cursos y mi plataforma predilecta para eso es Udemy. He hecho varios cursos pero sólo recomiendo aquellos que verdaderamente me han sido útiles. Aquí van:
Si necesitas apoyo en forma de libro, puede que éstos te sirvan de ayuda:
La programación es un mundo que evoluciona a una velocidad de vértigo. Los autores de estos libros lo saben, por eso suelen encargarse de actualizar su contenido regularmente. Asegúrate de que así sea antes de adquirirlos .
Participo en el programa de afiliados de Udemy y Amazon, lo que significa que, si compras alguno de estos cursos y/o libros, yo me llevaré una pequeña comisión y a ti no costará nada extra. Vamos, lo que se dice un win-win 
.
Otros artículos que pueden interesarte
Gracias Fabián! Angular usa TypeScript, que es como una variante de JS. En este artículo tienes más detalles https://www.acontracorrientech.com/claves-para-entender-angular-que-es-y-como-se-utiliza/
Muy buena guía!
Estoy comenzando con lo que es Angular y hay algunas «cositas» que no logro entender. Por ejemplo, como hago para usar código JS. Instalé Bootstrap y lo agregué a angular.json pero a la hora de usar javascript se me pierde el mundo.
Muy buena la info, gracias por compartirla!