Angular: Integración con Bootstrap CSS

La integración de Bootstrap CSS con Angular 18 permite mejorar el diseño y la responsividad de las aplicaciones web. Este módulo se centra en cómo combinar ambas tecnologías para obtener una interfaz de usuario más atractiva y funcional.

Instalación de Bootstrap CSS

Para comenzar, es necesario instalar Bootstrap en tu proyecto de Angular 18. Puedes hacerlo utilizando npm:

npm install bootstrap

Una vez instalado, debemos importar Bootstrap en el archivo angular.json para que Angular lo reconozca. Añade la siguiente línea en la sección de estilos:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

Uso de clases de Bootstrap en componentes Angular

Después de la instalación, puedes empezar a usar las clases de Bootstrap en tus componentes. A continuación, se muestra un ejemplo de un componente básico:

// archivo: src/app/app.component.html
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h1>Bienvenido a Angular 18 con Bootstrap</h1>
      <p>Esta es una demostración de integración.</p>
    </div>
  </div>
</div>

En este ejemplo, las clases container, row y col-md-6 provienen de Bootstrap, y se utilizan para estructurar el diseño de la página.

Personalización de Bootstrap

Para personalizar Bootstrap, puedes sobrescribir las variables de Sass. Primero, instala sass en tu proyecto:

npm install sass

Luego, crea un archivo src/styles.scss y añade las variables que deseas personalizar antes de importar Bootstrap:

// archivo: src/styles.scss
$primary: #ff5733; // Cambia el color primario
@import "~bootstrap/scss/bootstrap";

Finalmente, actualiza el archivo angular.json para usar styles.scss en lugar de styles.css:

"styles": [
  "src/styles.scss"
]

Integración de componentes de Bootstrap

Bootstrap ofrece una variedad de componentes preconstruidos que pueden integrarse fácilmente en Angular. Por ejemplo, para usar un componente de alerta:

// archivo: src/app/app.component.html
<div class="alert alert-warning" role="alert">
  Este es un componente de alerta de Bootstrap.
</div>

Uso de directivas y pipes de Angular con Bootstrap

Las directivas y pipes de Angular pueden combinarse con las clases de Bootstrap para crear componentes dinámicos. Por ejemplo, para mostrar una lista de elementos:

// archivo: src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div class="container">
      <ul class="list-group">
        <li *ngFor="let item of items" class="list-group-item">{{ item }}</li>
      </ul>
    </div>
  `
})
export class AppComponent {
  items = ['Elemento 1', 'Elemento 2', 'Elemento 3'];
}

En este ejemplo, *ngFor es una directiva de Angular que se usa para iterar sobre una lista de elementos, y list-group y list-group-item son clases de Bootstrap para estilizar la lista.