Cómo crear un componente sencillo para mostrar un texto con un estilo en Angular y cómo usarlo en nuestra aplicación.
- Requisitos para crear componente en Angular.
- Crear componente en Angular.
- Usar el componente creado en nuestra aplicación Angular.
Requisitos para crear componente en Angular
Necesitaremos disponer de un entorno de desarrollo en Angular y de una aplicación. En el siguiente tutorial explicamos todo esto paso a paso:
Crear componente en Angular
Desde nuestro IDE de desarrollo Visual Studio Code, con el proyecto abierto, accederemos a la terminal (podemos mostrar la ventana de terminal pulsando Control + Ñ). Desde la carpeta de nuestra aplicación, para crear un componente llamado «proyectoa-texto-formateado», ejecutaremos el siguiente comando:
|
1 |
ng generate component proyectoa-texto-formateado |
Si revisamos el árbol de carpetas y ficheros de nuestro proyecto Angular, podremos comprobar que el comando anterior a creado una carpeta con el nombre del componente y, dentro de esta carpeta, ha creado los ficheros:
- proyectoa-texto-formateado.component.ts: clase TypeScript donde se definen las propiedades y métodos necesarios para gestionar la lógica y el comportamiento del componente. Se utiliza para manejar eventos, gestionar datos y controlar la vista.
- proyectoa-texto-formateado.component.html: plantilla HTML que contiene la estructura visual del componente. Por defecto, esta vista se encuentra en un archivo separado, pero también se podría definir directamente en la clase con el atributo template, pero no es lo recomendado.
- proyectoa-texto-formateado.component.css: estilos del componente, definidos en un archivo aparte. También se podrían definir directamente en la clase con el atributo styles (pero no es lo recomendado).
- proyectoa-texto-formateado.component.spec.ts: archivo para pruebas unitarias, para realizar test del código y el componente.
Conviene mencionar que un componente en Angular puede comunicarse con otros mediante atributos de entrada y salida:
- Entrada @Input(): permite al componente padre enviar datos al hijo.
- Salida @Output(): permite al componente hijo emitir eventos o datos hacia el componente padre.
Los componentes en Angular se organizan bajo una estructura jerárquica padre-hijo:
- Un componente padre puede incluir componentes hijos en su vista HTML.
- Los componentes hijos heredan datos y eventos mediante @Input() y @Output(), lo que facilita la comunicación entre ellos.
Vamos a hacer una pequeña modificación en el componente creado, de forma que muestre el texto con formato negrita. Para ello, editaremos el fichero proyectoa-texto-formateado.component.html y modificaremos la línea de código por esta:
|
1 |
<p class="negrita">proyectoa-texto-formateado works!</p> |
Para definir la clase «negrita», editaremos el fichero proyectoa-texto-formateado.component.css y añadiremos la línea:
|
1 |
.negrita { font-weight: bold;} |
Revisaremos el contenido del fichero proyectoa-texto-formateado.component.ts, donde podremos obtener el nombre de la clase (lo necesitaremos a continuación para referenciarla), en este caso: ProyectoaTextoFormateadoComponent.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { Component } from '@angular/core'; @Component({ selector: 'app-proyectoa-texto-formateado', standalone: true, imports: [], templateUrl: './proyectoa-texto-formateado.component.html', styleUrl: './proyectoa-texto-formateado.component.css' }) export class ProyectoaTextoFormateadoComponent { } |
No necesitamos hacer modificaciones en el fichero de clase del componente, aunque vamos a explicar cada elemento y su uso:
- selector: define la etiqueta HTML que invoca al componente, para este ejemplo se invocará con:
|
1 |
<app-proyectoa-texto-formateado></app-proyectoa-texto-formateado> |
- Standalone: indica si es un componente independiente (por defecto es True).
- Imports: array de componentes que importa este componente padre.
- templateUrl: apunta al archivo que contiene el HTML del componente.
- styleUrls: apunta al archivo de estilos específico del componente.
- HeaderComponent: clase que contiene la lógica, las propiedades y los métodos que definen el comportamiento del componente. En el ejemplo está vacía.
Usar el componente creado en nuestra aplicación Angular
Ahora vamos a modificar el proyecto existente para importar este componente hijo en el padre y poder usarlo. Para ello, editaremos el fichero app.component.ts y añadiremos la siguiente línea al principio del fichero:
|
1 |
import { ProyectoaTextoFormateadoComponent } from './proyectoa-texto-formateado/proyectoa-texto-formateado.component'; |
Y en la línea:
|
1 |
imports: [RouterOutlet], |
Añadiremos:
|
1 |
imports: [RouterOutlet, ProyectoaTextoFormateadoComponent], |
El contenido del fichero app.component.ts será:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { ProyectoaTextoFormateadoComponent } from './proyectoa-texto-formateado/proyectoa-texto-formateado.component'; import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, ProyectoaTextoFormateadoComponent], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'proyectoa_hola_mundo'; } |
Por último, para usar el componente en la plantilla HTML de la aplicación, si tenemos código propio en el fichero app.component.html, agregaremos la siguiente línea en la parte del código donde queramos mostrar el texto. En caso de que el código HTML del fichero anterior sea el generado automáticamente al crear el proyecto, podremos eliminarlo por completo y dejar, únicamente, la siguiente línea:
|
1 |
<app-proyectoa-texto-formateado></app-proyectoa-texto-formateado> |
De esta forma, al compilar la aplicación Angular con el comando:
|
1 |
ng serve -o |
Se abrirá una ventana del navegador con el texto que muestra el componente:
