Componente de botones Bootstrap de Angular – Part 1

Angular ng bootstrap es un marco de arranque que se usa con angular para crear componentes con un gran estilo y este marco es muy fácil de usar y se usa para crear sitios web receptivos.

En este artículo sabremos cómo usar Buttons en angular ng bootstrap. Los botones se utilizan para formar un grupo de botones.

Sintaxis de instalación:

ng add @ng-bootstrap/ng-bootstrap

Acercarse:

• Primero, instale el bootstrap angular ng usando el comando mencionado anteriormente.
• Importe el módulo de arranque ng en module.ts

  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  imports: [
    NgbModule
  ]
  

• En app.component.html crea un componente de botón.
• Sirve la aplicación usando ng serve.

Ejemplo 1:

<br/>
<div class="btn-group btn-group-toggle">
  <label class="btn-success" ngbButtonLabel>
    <input type="checkbox" ngbButton> 
    GeeksforGeeks1
  </label>
  <label class="btn-warning" ngbButtonLabel>
    <input type="checkbox" ngbButton>
    GeeksforGeeks2
  </label>
  <label class="btn-danger" ngbButtonLabel>
    <input type="checkbox" ngbButton> 
    GeeksforGeeks3
  </label>
  <label class="btn-info" ngbButtonLabel>
    <input type="checkbox" ngbButton>
    GeeksforGeeks4
  </label>
  <label class="btn-primary" ngbButtonLabel>
    <input type="checkbox" ngbButton> 
    GeeksforGeeks5
  </label>

import { NgModule } from '@angular/core';
  
// Importing forms module
import { FormsModule, ReactiveFormsModule  } 
from '@angular/forms';
import { BrowserModule } 
from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
   
import { AppComponent }   from './app.component';
import { NgbModule } 
from '@ng-bootstrap/ng-bootstrap';
   
@NgModule({
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    NgbModule
  ]
})
export class AppModule { }

Producción:

Ejemplo 2:

<br/>
<div class="btn-group btn-group-toggle">
  <label class="btn-success" ngbButtonLabel>
    <input type="radio">
    GeeksforGeeks1
  </label>
  <label class="btn-warning" ngbButtonLabel>
    <input type="radio">
    GeeksforGeeks2
  </label>
  <label class="btn-danger" ngbButtonLabel>
    <input type="radio">
    GeeksforGeeks3
  </label>
  <label class="btn-info" ngbButtonLabel>
    <input type="radio">
    GeeksforGeeks4
  </label>
  <label class="btn-primary" ngbButtonLabel>
    <input type="radio">
    GeeksforGeeks5
  </label>

import { NgModule } from '@angular/core';
  
// Importing forms module
import { FormsModule, ReactiveFormsModule  }
from '@angular/forms';
import { BrowserModule }
from '@angular/platform-browser';
import { BrowserAnimationsModule } 
from '@angular/platform-browser/animations';
   
import { AppComponent }   from './app.component';
import { NgbModule } 
from '@ng-bootstrap/ng-bootstrap';
   
@NgModule({
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    NgbModule
  ]
})
export class AppModule { }

Producción:

Referencia: https://ng-bootstrap.github.io/#/components/buttons/examples