Una app es una aplicación de software diseñada para funcionar en dispositivos móviles, como smartphones y tabletas.
- Anatomy of a component: https://angular.dev/guide/components
- generar componente https://angular.dev/cli/generate/component#Options
¿Qué es un componente?
Un componente es una parte de la web que tiene vista, estilos y lógica. En otras palabras, con los componentes web puedes crear tus propias etiquetas HTML que podrás reusar en toda la página web. Los componentes suelen recibir una propiedad o varias que sirven de entrada para la configuración (por ejemplo a los inputs le puedes pasar el tipo: text, password, email...).
En Angular los componentes tienen un archivo por cada parte del componente, es decir, se suele crear un archivo.html app.component.html para la vista, otro archivo.ts (typescript) app.component.ts para la lógica del componente y otro archivo.css o archivo.scss app.component.css para los estilos del componente. Dentro del componente, en archivo.ts, app.component.ts se definen las variables, se crean los métodos, se recogen y preparan los datos para pasarlos a la vista.
Todos los componentes deben tener:
Una clase de TypeScript class AppComponent con comportamientos como manejar la entrada del usuario y obtener datos de un servidor
Una plantilla HTML templateUrl: './app.component.html', que controla lo que se convierte en el DOM
Un selector de CSS styleUrl: './app.component.css' que define cómo se utiliza el componente en HTML
Video tutoriales:
- Angular (v18) desde cero - 02 Componentes https://youtu.be/dc8uiXLylUU
- Componentes STANDALONE en Angular https://youtu.be/FUXM-Qxvfqg
- Estructura de carpetas de Angular: https://youtu.be/NPnTuSmJH2c?t=153
- Angular 2023 #2 Componentes: https://youtu.be/CoW-Rpt9POY
- Carpetas en un proyecto de Angular APP - 28 Días: https://youtu.be/UW09Ky62fzo
- Standalone Component | Curso Angular 18 https://youtu.be/lL2wA3YT86M
- CURSO ANGULAR 17: COMPONENTES - DATABINDING: https://youtu.be/g8geh3lFpBg
- Creando el proyecto = Consumir API REST: https://youtu.be/1XThP-q9jI4
Creando componentes en Angular
Existen dos maneras de hacerlo: la método automático y el manual.
Método automático: Angular CLI
// Opciones para generar componentes en angular
// Generando 4 componetes: html, css, ts, test
ng generate component
ng g c
// Generando 3 componetes: html, ts, test
ng g c --inline-style
// Generando 3 componetes: css, ts, test
ng g c --inline-template
// Generando 3 componetes: html, css, ts
ng g c --skip-tests
// Generando 2 componetes: html, ts
ng g c --inline-style --skip-tests
// Generando 2 componetes: ts, test
ng g c --inline-template --inline-style
// Generando 1 componete: ts
ng g c --inline-template --inline-style --skip-tests
Vamos a crear un componente que sirva para crear el menú principal de una web y que lo queremos llamar navbar por el momento. Tan solo tienes que ejecutar en la terminal:
ng generate component navbar
La última palabra es el nombre del componente. Si es un componente de varias palabras, recomiendo que le des un nombre en kebab-case, es decir, separada cada palabra por un guión, por ejemplo: user-list.
Si navegamos ahora a la carpeta app del proyecto veremos que Angular CLI ha creado por nosotros una carpeta llamada navbar. Dentro de la carpeta navbar se ha creado un archivo.css, un archivo.html y un archivo.ts (controlador) junto con un archivo.spec.ts (este archivo es para los tests).
Luego debemos importar el nuevo componente class NavbarComponent en el archivo app.component.ts . El archivo app.component.ts sirve para declarar los componentes a nivel global para poder reutilizarlos más tarde.
//app.component.ts
import {NavbarComponent} from "./navbar/navbar.component";
@Component({
imports: [NavbarComponent],
})
La estructura quedaria de la siguiente Forma:
Método manual
Lo único que tienes que hacer es generar una nueva carpeta dentro de la carpeta app con el nombre del componente que quieras. Dentro de la carpeta creas un archivo que se llame nombre-componente.component.ts, por ejemplo navbar.component.ts. Dentro de ese componente escribes esta estructura:
// app/navbar/navbar.component.ts
import { Component } from "@angular/core";
@Component({
selector: "app-navbar",
standalone: true,
imports: [],
templateUrl: "./navbar.component.html",
styleUrls: ["./navbar.component.css"],
})
export class NavbarComponent {}
Crear el archivo nombre-componente.component.html y nombre-componente.component.css, por el momento vacíos. Para el ejemplo del componente de navbar lo que hago es crear: navbar.component.html y navbar.component.css.
Por último tendrás que importar el componente dentro del archivo app.component.ts que como hemos dicho se encarga de definir los componentes que puedes usar. Para nuestro ejemplo:
// app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {NavbarComponent} from "./navbar/navbar.component";
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, NavbarComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent { title = 'practica1_app1'; }
Estructura básica de los componentes
Un componente navbar.component en Angular debería tener 3 archivos, uno .html, otro .ts y otro .css o .scss.
Dentro del .html puedes escribir código HTML y dentro del .css o .scss se escriben los estilos que va a tener ese componente. Los estilos CSS que apliques en ese archivo solo afectarán a ese componente y no afectará a otros componentes.
Veamos ahora el archivo .ts también llamado controlador que es el que define la lógica del componente. La estructura básica es esta:
// app/navbar/navbar.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-navbar',
standalone: true,
imports: [],
templateUrl: './navbar.component.html',
styleUrl: './navbar.component.css'
})
export class NavbarComponent { }
El objeto que se pasa al decorador @Component se denomina metadatos del componente . Esto incluye las propiedades selector , template , y otras propiedades.
Lo primero que se hace es importar Component de @angular/core . Esto sirve para poder invocar un método que recibe un objeto con la configuración del componente. Dentro de esa configuración hay cinco propiedades:
selector: El selector es el nombre que va a tener la etiqueta HTML que sirve para poder usar este componente, para este ejemplo del navbar será <app-navbar> </app-navbar> . o es usu codigo corto <app-navbar/>
standalone: true, son componentes independientes que importan directamente otros componentes,
directivas y canalizaciones utilizados en sus plantillas: templateUrl: La ruta al fichero .html de ese componente para crear la vista.
styleUrl: La ruta al fichero .css de ese componente para crear la vista.
¡OJO!. El nombre que usas cuando exportas el componente (NavbarComponent) es el que luego tienes que poner entre llaves para importar el componente dentro del app.component.ts , en este caso:
import { NavbarComponent } from "./navbar/navbar.component";
Cómo usar los componentes dentro de otros
Si ya has creado el componente (NavbarComponent), puedes añadir la etiqueta en el archivo.html y si ya lo tienes importado correctamente en el app.component.ts , puedes probar que el componente funciona correctamente simplemente creando etiqueta dentro del archivo app.component.html.
En mi caso he borrado todo el contenido del archivo y he puesto:
<!-- app.component.html -->
<div>
<app-navbar></app-navbar>
<app-navbar/>
</div>
Si el archivo.html del componente que has creado tiene algún contenido podrás verlo si te abres la página en el navegador (http://localhost:4200/).
....