structure Angular ngx Bootstrap Introducción

Angular ngx Bootstrap Introducción

/ CSS / Por

Angular ngx Bcorrea es un esquema de código descubierto (diplomado por MIT) que proporciona componentes Bootstrap con tecnología Angular, que no requiere componentes JS originales. Este entorno 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, obtendremos una descripción genérica de ngx Bootstrap, su sintaxis básica y procedimiento de instalación, y comprenderemos su implementación a través de los ejemplos.

Él ngx Bootstrap facilita los diferentes tipos de componentes para el cumplimiento de los diferentes propósitos, tales como la Componente de advertencia se puede utilizar para proporcionar mensajes de comentarios contextuales para las acciones típicas del becario con un puñado de disponibles, el Componente de evaluación se puede utilizar para generar un componente que se representa mediante estrellas, el Componente de mostrador de progreso se puede utilizar para proporcionar comentarios actualizados sobre el progreso del trabajo, etc. Estos componentes emplean las API respectivas para realizar la tarea específica. El uso de estos componentes en el esquema angular puede ayudar a originar una aplicación web atractiva encima de mejorar la interactividad genérico con el sitio o la aplicación.

Sintaxis de instalación:

npm install ngx-bootstrap --save

Pasos para instalar Angular ngx Bootstrap: Antaño de continuar con la instalación de Angular ngx Bootstrap, debemos tener Angular CLI instalado en el sistema. Consulte el artículo Configuración de Angular CLI de Angular CLI para conocer el procedimiento de instalación detallado. Asegúrese de que Angular CLI & Node Package Manager esté instalado correctamente. Ejecute los siguientes comandos para comprobar la interpretación instalada:

node --version
npm -V OR npm --version
ng -V or ng --version

Estructura del esquema: A posteriori de una instalación exitosa, aparece la sucesivo estructura de esquema:

structure Angular ngx Bootstrap Introducción

Estructura del esquema

Pasos para crear el componente Bootstrap de Angular ngx:

  • Instale el bootstrap angular ngx usando el comando de instalación susodicho.
  • Valor el paquete requerido a las importaciones de NgModule en el aplicación.módulo.ts Archivo:
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
  
 @NgModule({
   ...
   imports: [ TooltipModule.forRoot(), … ]
   ...
 })
  • Agregue el sucesivo script en índice.html†

 

  • Agregue el componente específico (que se utilizará) a su aplicación.componente.html Archivo.
  • Ejecute la aplicación usando el sucesivo comando:
ng serve

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

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

aplicación.componente.html

<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>

aplicación.componente.ts

import { Component } from '@angular/core';

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  URL de estilo: ['./app.component.css']†

})

export class AppComponent {

  gfg = false;

  gfg1 = false;

  grp="true";

}

aplicación.módulo.ts

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],

  aporte: [

    FormsModule,

    BrowserModule,

    BrowserAnimationsModule,

    ReactiveFormsModule,

    AlertModule.forRoot(),

    TooltipModule.forRoot(),

    CollapseModule.forRoot(),

  ]†

})

export class AppModule {}

Salida:

Angular ngx Bootstrap Introducción

Ejemplo 2: Este ejemplo describe los componentes de mando agrupados en Angular ngx Bootstrap.

aplicación.componente.html

<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>

aplicación.componente.ts

import { Component } from "@angular/core";

 

@Component({

  selector: "app-root",

  templateUrl: "./app.component.html",

  URL de estilo: ["./app.component.css"]†

})

export class AppComponent {}

aplicación.módulo.ts

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],

  aporte: [

    FormsModule,

    BrowserModule,

    BrowserAnimationsModule,

    ReactiveFormsModule,

    ButtonsModule.forRoot(),

  ]†

})

export class AppModule {}

Salida:

1652039693 661 1 Angular ngx Bootstrap Introducción

 

Su Calificación Nos Ayuda a Mejorar