Integre Bootstrap 4 / jQuery con Angular 10 y diseñe la interfaz de usuario con Navbar y Table CSS Classes

 En este tutorial aprenderemos, por ejemplo, cómo usar Bootstrap 4 y jQuery con Angular 10 para crear interfaces de usuario profesionales.

Angular 10 es la última versión de Angular, al escribir este tutorial, y Bootstrap 4 es la última versión de Bootstrap, el marco CSS más popular. Puede usar Bootstrap y jQuery para crear interfaces de aspecto profesional sin ser un diseñador de CSS.

Nota: Bootstrap 4 hace uso de jQuery para implementar muchos componentes que necesitan acceso DOM. Bootstrap 5 reemplazará jQuery con JavaScript simple

En este tutorial, veremos particularmente cómo agregar Bootstrap 4 a proyectos de Angular generados con Angular CLI 10 .

En esta parte, vamos a diseñar una interfaz de interfaz de usuario de ejemplo con Bootstrap 4, después de instalar y configurar el marco en el front-end de Angular 10.

En el tutorial anterior, hemos:

• Instalado Angular CLI 10.
• Se generó una nueva aplicación de front-end utilizando Angular CLI 10.
• Creó algunos componentes de la interfaz de usuario.

Diferentes formas de integrar Bootstrap 4 con Angular 10

Hay muchas formas de agregar Bootstrap 4 a proyectos angulares:

• Instalar bootstrap y jquery a través de npm y agregar scripts y estilos a angular.json.
• Importación de archivos de script y estilo de arranque en formato src/index.html. Puede utilizar un CDN bootstrap 4 .
• Instalación de arranque a través de la NGP y la importación @import "~bootstrap/dist/css/bootstrap.css";en src/styles.css.
• Instalación y uso de ng-bootstrap npm install --save @ng-bootstrap/ng-bootstrap : es una biblioteca que contiene componentes angulares nativos para el marcado y los estilos CSS de Bootstrap. No depende de jQuery o JavaScript de Bootstrap.

¿Cómo trabajar con este tutorial?

Para completar este tutorial, deberá:

• Comience con el tutorial anterior, que lo lleva desde instalar Angular CLI 10 hasta llamar a la API RESTful
• Clone el proyecto de final de fuente de GitHub y siga los pasos del tutorial anterior para configurar el proyecto.
• Siga directamente los pasos para integrar Bootstrap 4 en su propio proyecto de Angular 10.

¿Cómo agregar Bootstrap 4 a su Angular 10 Front-End?

Después de ver diferentes formas de agregar Bootstrap 4 a Angular 10, ahora diseñemos nuestra interfaz de usuario de interfaz de Angular 10, construida en el tutorial anterior, con Bootstrap. Usaremos el primer enfoque, es decir, instalaremos bootstrap desde npm y luego incluiremos bootstrap.cssel archivo CSS, jQuery y Popover.js

Instalación de Bootstrap 4 y jQuery

Dirígete a tu proyecto, que creaste en el tutorial anterior, navega dentro de tu aplicación de interfaz de usuario Angular 10:

$ cd frontend

A continuación, instale bootstrap y jquery desde npm usando:

$ npm install --save bootstrap jquery

Añadiendo Bootstrap 4 a Angular CLI 10

A continuación, abra angular.json. Debes tener contenido similar al siguiente:

{

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
    "crmapp": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {},
    "architect": {
        "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
        "outputPath": "dist/crmapp",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
            "src/favicon.ico",
            "src/assets"
        ],
        "styles": [
            "src/styles.css"
        ],
        "scripts": []
        },

...
},
"defaultProject": "crmapp"
}

Bajo projects -> architect -> build -> scriptsagregar node_modules/jquery/dist/jquery.min.jsy node_modules/bootstrap/dist/js/bootstrap.min.js:

"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Debajo de projects -> architect -> build -> stylesagregar node_modules/bootstrap/dist/css/bootstrap.min.css:

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

Eso es. Ahora puede usar Bootstrap 4 en su aplicación de interfaz de usuario de Angular 10 como lo haría normalmente.

Diseñar componentes de Angular 10 con Bootstrap 4

Pongamos un ejemplo. Continúe, ábralo src/app/app.component.htmly actualícelo para agregar una barra de navegación de Bootstrap:

<nav  class="navbar navbar-expand-lg navbar-light bg-light">
    <a  class="navbar-brand"  href="#">Angular CRM</a>
    <button  class="navbar-toggler"  type="button"  data-toggle="collapse"  data-target="#navbarSupportedContent"  aria-controls="navbarSupportedContent"  aria-expanded="false"  aria-label="Toggle navigation">
    <span  class="navbar-toggler-icon"></span>
    </button>
<div  class="collapse navbar-collapse"  id="navbarSupportedContent">
    <ul  class="navbar-nav mr-auto">
        <li  class="nav-item active">
        <a  class="nav-link"  href="#">Home <span  class="sr-only">(current)</span></a>
        </li>
        <li  class="nav-item dropdown">
        <a  class="nav-link dropdown-toggle"  href="#"  id="navbarDropdown"  role="button"  data-toggle="dropdown"  aria-haspopup="true"  aria-expanded="false">
        Actions
        </a>
        <div  class="dropdown-menu"  aria-labelledby="navbarDropdown">
        <a  class="dropdown-item" [routerLink]="'/accounts'"> Accounts </a>
        <a  class="dropdown-item" [routerLink]="'/create-account'"> Create Account </a>
        <div  class="dropdown-divider"></div>
        <a  class="dropdown-item" [routerLink]="'/contacts'"> Contacts </a>
        <a  class="dropdown-item" [routerLink]="'/create-contact'"> Create Contact </a>
        <div  class="dropdown-divider"></div>
        <a  class="dropdown-item" [routerLink]="'/leads'"> Leads </a>
        <a  class="dropdown-item" [routerLink]="'/create-lead'"> Create Lead </a>
        <div  class="dropdown-divider"></div>
        <a  class="dropdown-item" [routerLink]="'/opportunities'"> Opportunities </a>
        <a  class="dropdown-item" [routerLink]="'/create-opportunity'"> Create Opportunity </a>
        </div>
        </li>
</ul>
</div>
</nav>
<div  class="container-fluid">
    <router-outlet></router-outlet>
</div>

Ahora, diseñemos el componente de la lista de contactos. Abrir src/app/contact-list.component.htmly agregar:

<h1>
My Contacts
</h1>
<div>
<table  class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tr *ngFor="let contact of contacts">
    <td> {{ contact.first_name }} </td>
    <td> {{ contact.last_name }} </td>
    <td> {{ contact.phone }} </td>
    <td> {{ contact.email }} </td>
    <td> {{ contact.address }} </td>
</tr>
</table>
</div>

Esta es una captura de pantalla del resultado después de agregar clases de Bootstrap 4:

Conclusión

En este tutorial, hemos visto diferentes formas que puede usar si desea agregar Bootstrap 4 / jQuery a su proyecto y luego hemos visto por ejemplo cómo agregar Bootstrap 4 a nuestra aplicación de front-end Angular 10 generada con Angular CLI.