Componente de grupo de botones de Angular MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario angular basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar el componente de grupo de botones en Angular MDBootstap.

El componente de grupo de botones se utiliza para mostrar un grupo de botones sin espacio entre ellos. Se puede agrupar horizontal o verticalmente, lo que permite a los usuarios poner la cantidad de opciones disponibles para elegir.

Sintaxis:

<div class="btn-group" role="group" aria-label="Basic example">
  <button mdbBtn type="button color="primary"> Content </button>
  <button mdbBtn type="button color="success"> Content </button>
</div>

Acercarse:

• Descarga Angular MDBootstrap desde el sitio oficial .
• Extraiga los archivos al directorio de trabajo actual.
• Instale npm en el proyecto actual usando el siguiente comando:

npm install

• Después de crear la carpeta de su proyecto, es decir , el nombre de la aplicación, acceda a ella con el siguiente comando:

cd appname

• Inicie el servidor con el siguiente comando:

ng serve

Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:

Estructura del proyecto

Ejemplo 1: este es el ejemplo básico que ilustra cómo usar el componente Grupo de botones en Angular MDBootstrap.

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Button Group Component</h4>
    <br />
    <div class="btn-group" 
         role="group" 
         aria-label="Basic example">
        <button mdbBtn color="red" mdbWavesEffect>
            Button 1
        </button>
        <button mdbBtn color="green" mdbWavesEffect>
            Button 2
        </button>
        <button mdbBtn color="blue" mdbWavesEffect>
            Button 3
        </button>
        <button mdbBtn color="yellow" mdbWavesEffect>
            Button 4
        </button>
    </div>
</div>

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

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

Producción:

Componente de grupo de botones de Angular MDBootstrap

Ejemplo 2: este ejemplo ilustra diferentes tamaños de botones en el componente de grupo de botones.

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Button Group Component</h4>
    <br />
    <div class="btn-group btn-group-lg" 
         role="group" 
         aria-label="Basic example">
        <button mdbBtn color="red" mdbWavesEffect>
            Button 1
        </button>
        <button mdbBtn color="green" mdbWavesEffect>
            Button 2
        </button>
        <button mdbBtn color="blue" mdbWavesEffect>
            Button 3
        </button>
        <button mdbBtn color="yellow" mdbWavesEffect>
            Button 4
        </button>
    </div>
    <br/>
    <br/>
    <div class="btn-group btn-group-sm" 
         role="group" 
         aria-label="Basic example">
        <button mdbBtn color="red" mdbWavesEffect>
            Button 1
        </button>
        <button mdbBtn color="green" mdbWavesEffect>
            Button 2
        </button>
        <button mdbBtn color="blue" mdbWavesEffect>
            Button 3
        </button>
        <button mdbBtn color="yellow" mdbWavesEffect>
            Button 4
        </button>
    </div>
</div>

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

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

Producción:

Diferentes tamaños de botones en el componente de grupo de botones

Referencia: https://mdbootstrap.com/docs/angular/components/buttons-group/