Introducción e instalación de MDBootstrap para Angular

Introducción: MDBootstrap (Diseño de materiales para Bootstrap) es un paquete de interfaz de usuario completo que se puede integrar con otros marcos como Angular, React, Vue, etc. animaciones para hacerlo más atractivo y fácil de usar que son compatibles con otros navegadores.

Características de MDBootstrap:

• Una herramienta de código abierto que se puede descargar fácilmente.
• Totalmente sensible a diferentes dispositivos.
• Hay varios componentes de interfaz de usuario que facilitan las tareas de los desarrolladores.
• Proporcione muchas animaciones e íconos.
• Increíble apariencia de las aplicaciones.

Requisito previo:

• Un editor de código como VS Code, Sublime, Brackets, etc.
• NodeJS debe estar instalado en el sistema.

Para ventanas:

https://www.geeksforgeeks.org/installation-of-node-js-on-windows/

Para Linux:

https://www.geeksforgeeks.org/installation-of-node-js-on-linux/

Conocimiento de la configuración de un Proyecto Angular
https://www.geeksforgeeks.org/angular-cli-angular-project-setup/

Instalación de MDBootstrap en Angular:

• Instale el paquete «@angular/cdk» (requerido si la versión de MDBootstrap Angular es mayor o igual a 9.0.0)

  npm install @angular/cdk --save

  

• Instale el paquete «angular-bootstrap-md»

  npm install angular-bootstrap-md --save

  

• En «app.module.ts», importe «MDBBootstrapModule» como se indica a continuación:

  import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';    import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { MDBBootstrapModule } from 'angular-bootstrap-md'; @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     MDBBootstrapModule.forRoot()   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

• Instale otras bibliotecas de terceros como para animación
  

  instalación de npm: guarde chart.js@2.5.0 @types/chart.js @fortawesome/fontawesome-free hammerjs animate.css

  

• Actualice el archivo «angular.json» importando los archivos .css y .js en arrays de estilos y scripts de node_modules como se indica a continuación:

  {   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",   "version": 1,   "newProjectRoot": "projects",   "projects": {     "myNewApp": {       "projectType": "application",       "schematics": {         "@schematics/angular:component": {           "style": "scss"         }       },       "root": "",       "sourceRoot": "src",       "prefix": "app",       "architect": {         "build": {           "builder": "@angular-devkit/build-angular:browser",           "options": {             "outputPath": "dist/myNewApp",             "index": "src/index.html",             "main": "src/main.ts",             "polyfills": "src/polyfills.ts",             "tsConfig": "tsconfig.app.json",             "aot": true,             "assets": [               "src/favicon.ico",               "src/assets"             ],             "styles": [ "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", "node_modules/@fortawesome/fontawesome-free/scss/solid.scss", "node_modules/@fortawesome/fontawesome-free/scss/regular.scss", "node_modules/@fortawesome/fontawesome-free/scss/brands.scss", "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss", "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",               "node_modules/animate.css/animate.css",               "src/styles.scss"             ],             "scripts": [               "node_modules/chart.js/dist/Chart.js",               "node_modules/hammerjs/hammer.min.js"             ]           },           "configurations": {             "production": {               "fileReplacements": [                 {                   "replace": "src/environments/environment.ts",                   "with": "src/environments/environment.prod.ts"                 }               ],               "optimization": true,               "outputHashing": "all",               "sourceMap": false,               "extractCss": true,               "namedChunks": false,               "extractLicenses": true,               "vendorChunk": false,               "buildOptimizer": true,               "budgets": [                 {                   "type": "initial",                   "maximumWarning": "2mb",                   "maximumError": "5mb"                 },                 {                   "type": "anyComponentStyle",                   "maximumWarning": "6kb",                   "maximumError": "10kb"                 }               ]             }           }         },         "serve": {           "builder": "@angular-devkit/build-angular:dev-server",           "options": {             "browserTarget": "myNewApp:build"           },           "configurations": {             "production": {               "browserTarget": "myNewApp:build:production"             }           }         },         "extract-i18n": {           "builder": "@angular-devkit/build-angular:extract-i18n",           "options": {             "browserTarget": "myNewApp:build"           }         },         "test": {           "builder": "@angular-devkit/build-angular:karma",           "options": {             "main": "src/test.ts",             "polyfills": "src/polyfills.ts",             "tsConfig": "tsconfig.spec.json",             "karmaConfig": "karma.conf.js",             "assets": [               "src/favicon.ico",               "src/assets"             ],             "styles": [               "src/styles.scss"             ],             "scripts": []           }         },         "lint": {           "builder": "@angular-devkit/build-angular:tslint",           "options": {             "tsConfig": [               "tsconfig.app.json",               "tsconfig.spec.json",               "e2e/tsconfig.json"             ],             "exclude": [               "**/node_modules/**"             ]           }         },         "e2e": {           "builder": "@angular-devkit/build-angular:protractor",           "options": {             "protractorConfig": "e2e/protractor.conf.js",             "devServerTarget": "myNewApp:serve"           },           "configurations": {             "production": {               "devServerTarget": "myNewApp:serve:production"             }           }         }       }     }},   "defaultProject": "myNewApp" }

• En «app.component.html», agregue el siguiente código para usar componentes MDBootstrap con Angular como se indica a continuación:

  <div class="container">   <div class="row justify-content-center">     <div class="col-4">       <div class="md-form">         <input mdbInput type="text"              id="name" class="form-control">         <label for="name">Enter Name</label>       </div>     </div>   </div>   <div class="row justify-content-center">     <div class="col-4 d-flex justify-content-center">       <button mdbBtn type="button"                       gradient="peach"                       rounded="true" mdbWavesEffect>           Save</button>     </div>   </div> </div>

• Luego ejecute la aplicación después de guardarla usando el siguiente comando:

  ng serve -o

Producción: