Bootstrap 4 con Angular 2

Bootstrap 4 con Angular 2 y ng-bootstrap

Dejar un comentario / Bootstrap 4, css, Framework Angular / Por

En este post te mostraré cómo comenzar a usar los estilos de Boostrap 4 en una app de Angular 2 gracias a ng-bootstrap.

Instalar dependencias

Comienza instalando los estilos de Bootstrap 4 con:

npm install --save bootstrap

Si te indica que necesita popper.js o jquery, ignora las advertencias.

Después de instalar los estilos, instala los componentes de Bootstrap 4 con:

npm install --save @ng-bootstrap/ng-bootstrap

Dejo como referencia mi package.json:

{
  "name": "angular",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@angular/common": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/forms": "^8.0.0",
    "@angular/platform-browser": "^8.0.0",
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/router": "^8.0.0",
    "@ng-bootstrap/ng-bootstrap": "^5.1.4",
    "bootstrap": "^4.4.1",
    "core-js": "2",
    "rxjs": "^6.5.2",
    "zone.js": "^0.9.1"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.2",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}

Presta atención a la línea 13 y 14 pues en ellos indico las dependencias de Bootstrap.

Importar Bootstrap en Angular

En el main.ts importa el módulo NgbModule así:

import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

Y en los imports del @NgModule dentro de app.module.ts también:

@NgModule({
  imports: [BrowserModule, FormsModule, /*Aquí --->*/ NgbModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})

Finalmente en el angular.json dentro del arreglo de styles indica el de Bootstrap que está dentro de node_modules/bootstrap/dist/css/bootstrap.min.css de manera que quede así:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "demo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/demo",
            "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",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "demo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "demo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "demo:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "demo"
}

En la línea 27 es en donde importo los estilos.

Usar estilos o componentes de Bootstrap 4 con Angular 2

Ahora puedes usar tanto los estilos de Bootstrap como los componentes del mismo. De hecho, si solo vas a usar los estilos CSS solo es necesario instalar la dependencia de Bootstrap y agregar los estilos.

Por ejemplo, podemos tener una alerta con puro CSS usando las clases de BS4:

<div class="alert alert-success">
	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi placeat vel doloremque ipsum. Incidunt vitae eligendi dolor dignissimos, magni possimus! Laborum ab corporis ipsa sunt similique rem molestias at repellendus!
</div>

O usar el componente ngb-alert así:

<ngb-alert type="success" [dismissible]="false">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi placeat vel doloremque ipsum. Incidunt vitae eligendi dolor dignissimos, magni possimus! Laborum ab corporis ipsa sunt similique rem molestias at repellendus!
</ngb-alert>

Al final tendremos el mismo resultado, la ventaja que provee ng-bootstrap es que los componentes y el funcionamiento de los mismos (abrir un modal, cerrar una alerta) están hechos con TypeScript.

Bootstrap 4 con Angular 2
Bootstrap 4 con Angular 2

Si quieres, igualmente puedes ver cómo agregar estilos Material Design a Angular 2 o ver cómo conectar MySQL y PHP con Angular 2.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *