En este tutorial, aprenderemos cómo integrar y usar bootstrap 4 con Angular 9.
Veremos cómo inicializar un proyecto de Angular 9 e integrarlo con Bootstrap 4. A continuación, usaremos las diversas utilidades CSS de Bootstrap 4 para crear un diseño receptivo con barras de navegación, tablas, formularios, botones, tarjetas y jumbotrons.
Bootstrap es un marco CSS gratuito y de código abierto para crear diseños receptivos, es móvil primero y contiene utilidades CSS listas para tipografía, formularios, botones y navegación, etc.
Este tutorial funciona con todas las versiones recientes de Angular ie v7 / v8 y v9.
Angular 9/8 y Bootstrap 4 por ejemplo
Hay varias formas de integrar Bootstrap 4 con su aplicación Angular 9 . Veamos una posible solución con un ejemplo.
- Paso 1: instalación de Angular CLI v9
- Paso 2: inicializar su proyecto de Angular 9
- Paso 3: instalación de Bootstrap 4
- Paso 4: creación de componentes angulares y configuración de enrutamiento
- Paso 5: agregar un Jumbotron Bootstrap 4
- Paso 6: creación de una tabla de Bootstrap 4 angular
- Paso 7: agregar un componente de formulario Bootstrap 4
Paso 1: instalación de Angular CLI v9
Comencemos instalando la última versión de Angular CLI. En su terminal, ejecute el siguiente comando:
$ npm install -g @angular/cli
Paso 2: inicializar su proyecto de Angular 9
Después de instalar Angular CLI, inicialicemos un proyecto de Angular 9 ejecutando el siguiente comando:
$ ng new angular-9-bootstrap-example
Luego, la CLI le preguntará:
Would you like to add Angular routing?
Presione Y.
A continuación, te preguntará:
Which stylesheet format would you like to use?
Elija "CSS".
A continuación, necesitamos configurar formas angulares.
Vaya al src/app/app.module.ts
archivo, importe FormsModule
desde @angular/forms
e inclúyalo en la imports
matriz de la siguiente manera:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
/* ... */
@NgModule({
declarations: [
/* ... */
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Paso 3: instalación de Bootstrap 4
Después de inicializar su proyecto de Angular 9, procedamos a instalar Bootstrap 4 e integrarlo con Angular.
Ve a la carpeta de tu proyecto:
$ cd angular-9-bootstrap-example
A continuación, instale Bootstrap 4 y jQuery desde npm usando el siguiente comando:
$ npm install --save bootstrap jquery
A continuación, vaya al angular.json
archivo y agregue las rutas de los archivos Bootstrap CSS y JS, así como jQuery a las matrices styles
y scripts
debajo del build
objetivo de la siguiente manera:
"architect": {
"build": {
[...],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
Paso 4: creación de componentes angulares y configuración de enrutamiento
Después de instalar e integrar Bootstrap 4 con su proyecto de Angular 9, creemos algunos componentes para probar varios estilos de Bootstrap.
Vaya a su interfaz de línea de comandos y ejecute los siguientes comandos:
$ ng generate component jumbotron
$ ng generate component bootstrap-form
$ ng generate component bootstrap-table
A continuación, debemos incluir estos componentes en el módulo de enrutamiento para habilitar múltiples vistas.
Vaya al src/app/app-routing.module.ts
archivo y actualícelo de la siguiente manera:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BootstrapTableComponent } from './bootstrap-table/bootstrap-table.component';
import { BootstrapFormComponent } from './bootstrap-form/bootstrap-form.component';
import { JumbotronComponent } from './jumbotron/jumbotron.component';
const routes: Routes = [
{path: "", pathMatch: "full",redirectTo: "home"},
{path: "jumbotron", component: JumbotronComponent},
{path: "bootstrap-form", component: BootstrapFormComponent},
{path: "bootstrap-table", component: BootstrapTableComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Paso 5: agregar un Jumbotron Bootstrap 4
Un Bootstrap Jumbotron es un componente ligero y flexible que, opcionalmente, puede ampliar toda la ventana gráfica para mostrar mensajes de marketing clave en su sitio.
Agreguemos un componente Bootstrap Jumbotron a nuestra página de jumbotron.
Dirígete al src/app/jumbotron/jumbotron.component.html
archivo y agrega el siguiente marcado HTML:
<div class="jumbotron" style="height: calc(95vh);">
<h1>Angular 9 Bootstrap 4 Demo</h1>
<p class="lead">
This tutorial teaches you how to integrate Bootstrap 4 with Angular 9
</p>
</div>
Wu usa la .jumbotron
clase incorporada para crear un Bootstrap Jumbotron.
Paso 6: creación de una tabla de Bootstrap 4 angular
Veamos ahora cómo usar una tabla Bootstrap 4 para mostrar datos tabulares.
Vaya al src/app/bootstrap-table/bootstrap-table.component.ts
archivo y agregue algunos datos que podamos mostrar:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-bootstrap-table',
templateUrl: './bootstrap-table.component.html',
styleUrls: ['./bootstrap-table.component.css']
})
export class BootstrapTableComponent implements OnInit {
employees = [
{id: 1, name: "E 001", description: "E 001 des", email: "e001@email.com"},
{id: 2, name: "E 002", description: "E 002 des", email: "e002@email.com"},
{id: 3, name: "E 003", description: "E 003 des", email: "e003@email.com"},
{id: 4, name: "E 004", description: "E 004 des", email: "e004@email.com"}
];
selectedEmployee;
constructor() { }
ngOnInit() {
}
public createEmployee(e: {id, name, description, email}){
this.employees.push(e);
}
public selectEmployee(e){
this.selectedEmployee = e;
}
}
Simplemente definimos dos variables employees
y selectedEmployee
para mantener el conjunto de empleados y el empleado seleccionado. Y un selectEmployee()
método que asigna al empleado seleccionado a la selectedEmployee
variable.
A continuación, vaya al src/app/bootstrap-table/bootstrap-table.component.html
archivo y actualícelo de la siguiente manera:
<div class="container" style="margin-top: 70px;">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let employee of employees">
<td></td>
<td> </td>
<td> </td>
<td>
<button class="btn btn-primary" (click)="selectEmployee(employee)"> Select</button>
</td>
</tr>
</tbody>
</table>
<div class="card text-center" *ngIf="selectedEmployee">
<div class="card-header">
#
</div>
<div class="card-block">
<h4 class="card-title"></h4>
<p class="card-text">
</p>
</div>
</div>
</div>
Una tarjeta Bootstrap 4 es un contenedor de contenido flexible y extensible. Incluye opciones para encabezados y pies de página, una amplia variedad de contenido, colores de fondo contextuales y potentes opciones de visualización. Si está familiarizado con Bootstrap 3, las tarjetas reemplazan nuestros viejos paneles, pozos y miniaturas. Funcionalidad similar a esos componentes está disponible como clases modificadoras para tarjetas.
Utilizamos el built-in .table
y .table-hover
clases para crear tablas de archivos de inicio, los .card
, .card-block
, .card-title
y .card-text
clases para crear tarjetas.
Paso 7: agregar un componente de formulario Bootstrap 4
Procedamos agregando un formulario con estilo Bootstrap al bootstrap-form
componente.
A continuación, vaya al src/app/bootstrap-form/bootstrap-form.component.ts
archivo y actualícelo de la siguiente manera:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'bootstrap-form/-create',
templateUrl: './bootstrap-form/.component.html',
styleUrls: ['./bootstrap-form/.component.css']
})
export class BootstrapForm/Component implements OnInit {
employee : {id, name, description, email} = {id: null, name: "", description: "", email: ""};
constructor() { }
ngOnInit() {
}
createEmployee(){
console.log("Employee created: ", this.employee);
this.employee = {id: null, name: "", description: "", email: ""};
}
}
A continuación, vaya al src/app/bootstrap-form/bootstrap-form.component.html
archivo y actualícelo de la siguiente manera:
<div class="container" style="margin-top: 70px;">
<div class="row">
<div class="col-sm-8 offset-sm-2">
<div>
<form>
<div class="form-group">
<label for="id">ID</label>
<input [(ngModel)]="employee.id" type="text" name="id" class="form-control" id="id" aria-describedby="idHelp" placeholder="Employee ID">
<small id="idHelp" class="form-text text-muted">Enter your employee’s ID</small>
<label for="name">Employee Name</label>
<input [(ngModel)]="employee.name" type="text" name="name" class="form-control" id="name" aria-describedby="nameHelp" placeholder="Enter your employee name">
<small id="nameHelp" class="form-text text-muted">Enter your employee’s name</small>
<label for="email">Employee Email</label>
<input [(ngModel)]="contact.email" type="text" name="email" class="form-control" id="email" aria-describedby="emailHelp"
placeholder="Enter your employee email">
<small id="nameHelp" class="form-text text-muted">Enter your employee’s email</small>
<label for="description">Employee Description</label>
<textarea [(ngModel)]="employee.description" name="description" class="form-control" id="description" aria-describedby="descHelp">
</textarea>
<small id="descHelp" class="form-text text-muted">Enter your employee’s description</small>
</div>
</form>
<button class="btn btn-primary" (click)="createEmployee()">Create employee</button>
</div>
</div>
</div>
</div>
Hacemos uso de las clases .form-group
y .form-control
para crear un formulario Bootstrap.
Paso 8: sirviendo su aplicación Angular 9
Dirígete a tu interfaz de línea de comandos y ejecuta el siguiente comando desde la carpeta de tu proyecto:
$ ng serve
Se iniciará un servidor de desarrollo en la http://localhost:4200
dirección.
Conclusión
Como resumen, hemos visto cómo inicializar un proyecto de Angular 9 e integrarlo con Bootstrap 4. A continuación, usamos varias utilidades CSS de Bootstrap para crear un diseño receptivo con tablas, formularios, botones, tarjetas y jumbotrons.
0 Comentarios
Dejanos tu comentario para seguir mejorando!