Search results

Change caret icon in Angular DropDownButton component

29 Jul 2021 / 1 minute to read

Dropdown arrow can be customized on popup open and close. It can be handled in beforeOpen and beforeClose event.

In the following example, the up arrow is updated on popup close and down arrow is updated on popup open using beforeOpen and beforeClose event by adding and removing e-caret-up class.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { ItemModel, BeforeOpenCloseMenuEventArgs, DropDownButtonComponent  } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
    selector: 'app-root',
    template: `<!-- To render DropDownButton. -->
               <button ejs-dropdownbutton #dropdownbutton [items]='items' content='Clipboard' (beforeOpen)='beforeOpen($event)' (beforeClose)='beforeClose($event)'></button>`
})

export class AppComponent {
   @ViewChild('dropdownbutton')
   public dropdownbutton: DropDownButtonComponent;
   // Initialize action items.
   public items: ItemModel[] = [
    {
        text: 'Cut'
    },
    {
        text: 'Copy'
    },
    {
        text: 'Paste'
    }];
    // To update up arrow with `e-caret-up` class.
    public beforeOpen (args: BeforeOpenCloseMenuEventArgs) {
        this.dropdownbutton.cssClass = 'e-caret-up';
    }
    // To remove `e-caret-up` class.
    public beforeClose (args: BeforeOpenCloseMenuEventArgs) {
        this.dropdownbutton.cssClass = '';
    }

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

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        DropDownButtonModule
    ],
    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);