Change caret icon in EJ2 TypeScript Drop down button control

31 Aug 20233 minutes 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.

import { DropDownButton, ItemModel, BeforeOpenCloseMenuEventArgs, DropDownButtonModel } from '@syncfusion/ej2-splitbuttons';
import { enableRipple, createElement } from '@syncfusion/ej2-base';

enableRipple(true);
// Initialize action items.
let items: ItemModel[] = [
    {
        text: 'Cut'
    },
    {
        text: 'Copy'
    },
    {
        text: 'Paste'
    }];

// Initialize DropDownButton options.
let options: DropDownButtonModel = {
  items: items,
 // Removing 'e-caret-up' class.
  beforeClose: (args: BeforeOpenCloseMenuEventArgs) => {
     drpDownBtn.cssClass = '';
  },
  // Adding 'e-caret-up' class.
  beforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
     drpDownBtn.cssClass = 'e-caret-up';
  }
};
// To initialize the DropDownButton component.
let drpDownBtn: DropDownButton = new DropDownButton(options);
// Render initialized DropDownButton.
drpDownBtn.appendTo('#arrow');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 DropDownButton</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <button id='arrow'>Clipboard</button>
    </div>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-caret {
  transform: rotate(0deg);
  transition: transform 200ms ease-in-out;
}

.e-caret-up .e-caret {
  transform: rotate(180deg);
}

button {
  margin: 25px 5px 20px 20px;
}