Create buttongroup with rounded corner in Button group component

27 Apr 20241 minute to read

The ButtonGroup with rounded corner has round edges on both side. In the ButtonGroup with rounded corner, e-round-corner class is to be added to the target element.

The following example illustrates how to create ButtonGroup with rounded corner.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { enableRipple } from '@syncfusion/ej2-base'



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

@Component({
imports: [
        
        ButtonModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
              <!-- To render ButtonGroup. -->
               <div class='e-btn-group e-round-corner'>
                 <button ejs-button>HTML</button>
                 <button ejs-button>CSS</button>
                 <button ejs-button>Javascript</button>
               </div>
               </div>`
})

export class AppComponent { }

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));