How to use a template with SF Angular SplitButton

[Stephen Hurst]

My first problem was how to style the top part of the SplitButton - the button text and down-arrow - differently from the popupu that opens from the down-arrow.  Using cssClass input applies the same styles to the whole Splitbutton including the menu.

The documentation says there's an option to use a template for the popup, and it works in the demo on the docs page but not for me.  The Splitbutton:

                        <ejs-splitbutton #testSb content="&nbsp;Testing Splitbutton&nbsp;"

                            cssClass="testSb"

                            [items]="testItems"

                            (click)="testMainClicked($event)"

                            (select)="testItemSelected($event)"

                            target="#sbMenuTarget">

                        </ejs-splitbutton>

And for the template, I've tried with <div id="sbMenuTarget">, with <div#sbMenuTarget> , with <ng-template id="sbMenuTarget">, with <ng-template #sbMenuTarget>, ... in each case, clicking for the menu gets nothing happening at all.  (It does work normally without the target input.)

[YuvanShankar Arunagiri]

Hi Stephen,

Query: My first problem was how to style the top part of the SplitButton?

For the split button component, the button text and down-arrow button are placed separately. This is the behavior of the split button. If you want to combine both as a single button, then you can use the dropdown button component. Refer to the below links for more details.

Demo’s link: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/button/dropdown-button

UG link: https://ej2.syncfusion.com/angular/documentation/drop-down-button/getting-started

Note: Both the split button and dropdown button functionality are almost the same; the only difference is the UI.

Query: Template related issue?

Once we set the target property of the split button and dropdown button components, the items property data does not render for those components; the popup element takes the target element alone. This is the behavior of those components.

UG link: https://ej2.syncfusion.com/angular/documentation/split-button/popup-items#popup-templating

Sample link: https://stackblitz.com/edit/angular-ben9tp?file=src%2Fapp.component.html     

Get back to us if you need any further assistance on this.

Regards,

YuvanShankar A

[Stephen Hurst]

Actually I found a solution to the original problem.  Here it is for anyone wondering.

First give the splitbutton an id, like so:

        <ejs-splitbutton id="sfSplitbuttonMenu" . . .

Then in your css, use 'button' with the name you used for id in the following way:

button#sfSplitbuttonMenu, button#sfSplitbuttonMenu_dropdownbtn {

. . . (your styles here) . . .

}

This way you can make the whole top part of the splitbutton element blue for example, while the menu popup keeps its default styles. If you need to style it too, maybe dig name of th right node out of the Dev tools "Inspect" like I did.

Note that this relies on a SF implementation detail that might change.

[YuvanShankar Arunagiri]

Yes, Stephen. We can customize the split button appearance by override the CSS style shown as below.

.e-split-btn-wrapper button {

    background-color: #6767dc !important;

}

Output screenshot:

Sample link: https://stackblitz.com/edit/angular-ben9tp-z8fhfp?file=src%2Fapp.component.css

Get back to us if you need any further assistance on this.