Search results

Create ButtonGroup with icons in Angular ButtonGroup component

22 Oct 2021 / 1 minute to read

To create ButtonGroup with icons, iconCss property of the button component can be used.

The following example illustrates how to create ButtonGroup with icons.

<<<<<<< HEAD

Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
Copied to clipboard
>>>>>>> d7e69358d25a5ae827d15ade910d3facd42a7658


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

@Component({
    selector: 'app-root',
    template: `<!-- To render ButtonGroup. -->
               <div class='e-btn-group'>
                  <button ejs-button iconCss='e-icons e-left-icon'>Left</button>
                  <button ejs-button iconCss='e-icons e-middle-icon'>Right</button>
                  <button ejs-button iconCss='e-icons e-right-icon'>Middle</button>
                </div>`
})

export class AppComponent { }
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family:  'Helvetica Neue','calibiri';
  font-size:16px;
  top: 45%;
  left: 45%;
}
.e-btn-group {
  margin: 25px 5px 20px 20px;
}

.e-left-icon::before {
    content: '\e33a';
}

.e-right-icon::before {
    content: '\e34d';
}

.e-middle-icon::before {
    content: '\e35e';
}