Header Ads Widget

Ticker

6/recent/ticker-posts

Diseñar una aplicación de ejemplo angular 9/8/7 con Bootstrap 4 Navbar, Jumbotron, tablas, formularios y tarjetas

InstintoProgramador octubre 15, 2020

 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.tsarchivo, importe FormsModuledesde @angular/formse inclúyalo en la importsmatriz 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.jsonarchivo y agregue las rutas de los archivos Bootstrap CSS y JS, así como jQuery a las matrices stylesy scriptsdebajo del buildobjetivo 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.tsarchivo 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.htmlarchivo 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 .jumbotronclase 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.tsarchivo 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 employeesy selectedEmployeepara mantener el conjunto de empleados y el empleado seleccionado. Y un selectEmployee()método que asigna al empleado seleccionado a la selectedEmployeevariable.

A continuación, vaya al src/app/bootstrap-table/bootstrap-table.component.htmlarchivo 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 .tabley .table-hoverclases para crear tablas de archivos de inicio, los .card, .card-block, .card-titley .card-textclases para crear tarjetas.

Paso 7: agregar un componente de formulario Bootstrap 4

Procedamos agregando un formulario con estilo Bootstrap al bootstrap-formcomponente.

A continuación, vaya al src/app/bootstrap-form/bootstrap-form.component.tsarchivo 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.htmlarchivo 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-groupy .form-controlpara 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:4200direcció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.

Tags:

Publicar un comentario

0 Comentarios

Dejanos tu comentario para seguir mejorando!