Angular ngx Bootstrap Introducción

Angular ngx B ootstrap es un proyecto de código abierto (con licencia MIT) que proporciona componentes de Bootstrap con la tecnología de Angular, que no requiere la inclusión de ningún componente JS original. Este marco facilita la creación de componentes con gran estilo y muy fáciles de usar, lo que, a su vez, ayuda a crear sitios web o aplicaciones web interactivos y receptivos. En este artículo, conoceremos una descripción general de ngx Bootstrap, su sintaxis básica y procedimiento de instalación, además de comprender su implementación a través de los ejemplos.

ngx Bootstrap facilita los diferentes tipos de componentes para cumplir con los diferentes propósitos, como el componente de alerta que se puede usar para proporcionar mensajes de retroalimentación contextuales para las acciones típicas del usuario con el puñado de disponibles, el componente de calificación  se puede usar para hacer un componente que mostrarse con estrellas, el componente Progressbar se puede usar para proporcionar comentarios actualizados sobre el progreso del trabajo, etc. Estos componentes utilizan las API respectivas para realizar la tarea específica. El uso de estos componentes en el proyecto angular puede ayudar a crear una aplicación web atractiva, además de mejorar la interactividad general del sitio o la aplicación.

Sintaxis de instalación:

npm install ngx-bootstrap --save

Pasos para instalar Angular ngx Bootstrap: Antes de proceder a instalar Angular ngx Bootstrap, debemos tener instalado Angular CLI en el sistema. Consulte el artículo Configuración de Angular CLI Angular Project para conocer el procedimiento de instalación detallado. Asegúrese de que Angular CLI & Node Package Manager esté instalado correctamente. Para verificar la versión instalada, ejecute los siguientes comandos:

• Para la versión de NodeJS:

node --version

• Para la versión NPM:

npm -V OR npm --version

• Para la versión CLI angular:

ng -V or ng --version

Estructura del proyecto: después de una instalación exitosa, aparecerá la siguiente estructura del proyecto:

Estructura del proyecto

Pasos para la creación del componente Bootstrap de Angular ngx:

• Instale el bootstrap angular ngx usando el comando de instalación mencionado anteriormente.
• Importe el paquete requerido a las importaciones de NgModule en el archivo app.module.ts :

 import { TooltipModule } from 'ngx-bootstrap/tooltip';
  
 @NgModule({
   ...
   imports: [ TooltipModule.forRoot(), … ]
   ...
 })

• Agregue el siguiente script en index.html :

<enlace href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” rel=”hoja de estilo”>

• Agregue el componente específico (que se utilizará) a su archivo app.component.html .
• Ejecute la aplicación usando el siguiente comando:

ng serve

Representará la aplicación en http://localhost:4200/ automáticamente.

Ejemplo: Este ejemplo ilustra la implementación de Angular ngx Bootstrap.

<div class="text-center">
    <h1>GeeksforGeeks</h1>
    <h3>Angular ngx Bootstrap Example</h3>
    <button type="button" 
            class="btn btn-secondary" 
            [disabled]="grp" 
            (click)="gfg1 = !gfg1" 
            aria-controls="geeks1">
        Disabled Button 
    </button>
    <button type="button" 
            class="btn btn-primary active" 
            tooltip="Active Button" 
            placement="top" 
            (click)="gfg1 = !gfg1" 
            aria-controls="geeks1"> 
      Button
    </button>
    <button type="button" 
            class="btn btn-danger active" 
            tooltip="Click Here to toggle the view" 
            placement="bottom" 
            (click)="gfg = !gfg" 
            aria-controls="geeks"> 
      Click to collapse! 
    </button>
    <div id="geeks" 
         [collapse]="gfg">
        <div class="well well-lg card card-block card-header">
            DSA Self Paced Course is specifically designed
            for beginners, whether it be students or working 
            professionals, who want to learn the Data Structures, 
            can easily learn the concepts. 
        </div>
    </div>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  gfg = false;
  gfg1 = false;
  grp="true";
}

import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
      
import { AlertModule } from "ngx-bootstrap/alert";
import { TooltipModule } from "ngx-bootstrap/tooltip";
import { CollapseModule } from "ngx-bootstrap/collapse";
import { AppComponent } from "./app.component";
  
@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent],
  imports: [
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    AlertModule.forRoot(),
    TooltipModule.forRoot(),
    CollapseModule.forRoot(),
  ],
})
export class AppModule {}

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8" />
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1" />
    <link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
          rel="stylesheet" />
    <link rel="icon" 
          type="image/x-icon" 
          href="favicon.ico" />
    <link rel="preconnect" 
          href="https://fonts.gstatic.com" />
    <link href=
"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
          rel="stylesheet" />
    <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet" />
</head>
  
<body class="mat-typography">
    <app-root></app-root>
</body>
</html>

Producción:

 

Ejemplo 2: este ejemplo describe los componentes de botón agrupados en Angular ngx Bootstrap.

<div class="text-center">
  <h1>GeeksforGeeks</h1>
  <h3>Angular ngx Bootstrap Example</h3>
  <div class="btn-group">
    <label class="btn btn-primary" 
           role="button">Left
       </label>
    <label class="btn btn-primary" 
           role="button">Central
       </label>
    <label class="btn btn-primary" 
           role="button">Right
       </label>
  </div>
</div>

import { Component } from "@angular/core";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {}

import { NgModule } from "@angular/core";
  
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { ButtonsModule } from "ngx-bootstrap/buttons";
  
import { AppComponent } from "./app.component";
  
@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent],
  imports: [
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    ButtonsModule.forRoot(),
  ],
})
export class AppModule {}

Producción: