Archivo con la clase del componente en Angular
La parte principal de cualquier componente es su funcionalidad, es decir, propiamente su programa. En Angular, la funcionalidad del componente se escribe en el lenguaje TypeScript y representa una clase POO.
En cada componente, esta clase se ubica
en un archivo con la extensión .ts. En nuestro
componente principal, este será el archivo
app.component.ts.
Familiaricémonos con el contenido de este archivo. Para empezar, preste atención a la clase de nuestro componente:
export class AppComponent {
title: string = 'test';
}
A esta clase se le aplica el decorador @Component.
Este decorador toma como parámetro un
objeto que configura nuestro componente:
@Component({
selector: 'app-root',
standalone: true,
imports: [FormsModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
En la propiedad templateUrl se establece la ruta
al archivo que contiene el maquetado (markup)
de nuestro componente.
En la propiedad styleUrls se establece un array
de rutas a archivos CSS que estilizan el maquetado
de nuestro componente. Como puede ver, puede haber
más de un archivo de estilos.
En la propiedad selector se establece el selector
de la etiqueta HTML en la que se mostrará
(se montará) el código HTML de nuestro
componente. En nuestro caso, vemos el nombre
app-root. A este nombre le corresponde
una etiqueta del mismo nombre. Esta etiqueta está escrita en el archivo
de diseño src/index.html. En el lugar
donde está escrita esta etiqueta, se insertará
el maquetado de nuestro componente.
En la propiedad imports se indican los módulos
que se importan en nuestro componente.
En la propiedad standalone siempre se
indicará el valor true. Actualmente, esto es
más bien algo auxiliar de Angular, por lo que
por ahora no se preocupe por ello.
Abra el archivo app.component.ts y
estúdielo.
Cree varios archivos con estilos y conéctelos en el decorador.
