How to add toggle button in Angular Toolbar

31 Aug 202611 minutes to read

The Toolbar component supports adding toggle buttons through the template property of toolbar items. Toggle buttons provide users with the ability to switch between two states, making them ideal for features like play/pause, show/hide, or enable/disable functionality.

Steps

  1. Define the toggle button structure. Use the Toolbar item’s template property to declare the HTML for the button. The template property accepts a string of HTML, a query selector (#id), or an ng-template reference. The example below uses the string form to keep the toggle markup inline:

     <e-item [template]="'<button class=&quot;e-btn&quot; id=&quot;media_btn&quot;></button>'"></e-item>

  2. Render the toggle button and bind a click handler in the Toolbar created event. Toggle the icon CSS class (for example, swap e-play and e-pause) and the button content based on the active state. A typical toggle handler:

      <e-item template='<button class="e-btn" id="media_btn"></button>'></e-item>
  • Render the toggle button into the targeted element using the Toolbar created event handler. Bind a click event to handle state changes. When the toggle button is clicked, update the icon and content based on the current active state.
<div class="control-section e-tbar-section">
    <div class="e-sample-resize-container">
        <!-- Render the Toolbar Component -->
        <ejs-toolbar id="toolbar" class="toggle">
            <e-items>
                <e-item>
                    <ng-template #template>
                        <button ejs-button class="e-btn" cssClass="e-flat" iconCss="e-icons e-play-icon" isToggle="true" #playButton (click)="mediaBtnClick()"></button>
                    </ng-template>
                </e-item>
                <e-item type='Separator'></e-item>
                <e-item>
                    <ng-template #template>
                        <button ejs-button class="e-btn" cssClass="e-flat" iconCss="e-icons e-zoomin-icon" isToggle="true" #zoom (click)="zoomBtnClick()"></button>
                    </ng-template>
                </e-item>
                <e-item type='Separator'></e-item>
                <e-item>
                    <ng-template #template>
                        <button ejs-button class="e-btn" cssClass="e-flat" iconCss="e-icons e-undo-icon" isToggle="true" #undo (click)="undoBtnClick()"></button>
                    </ng-template>
                </e-item>
                <e-item type='Separator'></e-item>
                <e-item>
                    <ng-template #template>
                        <button ejs-button class="e-btn" cssClass="e-flat" iconCss="e-icons e-filter-icon" isToggle="true" #filter (click)="filterBtnClick()"></button>
                    </ng-template>
                </e-item>
                <e-item type='Separator'></e-item>
                <e-item>
                    <ng-template #template>
                        <button ejs-button class="e-btn" cssClass="e-flat" iconCss="e-icons e-hide-icon" isToggle="true" #hide (click)="hideBtnClick()" [content]="content"></button>
                    </ng-template>
                </e-item>
            </e-items>
        </ejs-toolbar>
        <br/>
        <div id="content">
          This content will be hidden, when you click on hide button and toggle get an active state as show, otherwise it will be visible.
        </div>
    </div>
</div>
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'




import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { Button, ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
         ToolbarModule, ButtonModule
    ],


standalone: true,
    selector: 'app-container',
    templateUrl: './app.component.html',
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild('playButton') public mediaBtn!: ButtonComponent;
    @ViewChild('zoom') public zoomBtn!: ButtonComponent;
    @ViewChild('undo') public undoBtn!: ButtonComponent;
    @ViewChild('filter') public filterBtn!: ButtonComponent;
    @ViewChild('hide') public visibleBtn!: ButtonComponent;
    
    public content: string = 'Hide';
    public mediaBtnClick() { 
        if (this.mediaBtn.element.classList.contains('e-active')) {
            this.mediaBtn.iconCss = 'e-icons e-play-icon';
        } else {
            this.mediaBtn.iconCss = 'e-icons e-pause-icon';
        }
    }

    public zoomBtnClick() { 
        if (this.zoomBtn.element.classList.contains('e-active')) {
            this.zoomBtn.iconCss = 'e-icons e-zoomin-icon';
        } else {
            this.zoomBtn.iconCss = 'e-icons e-zoomout-icon';
        }
    }

    public undoBtnClick() { 
        if (this.undoBtn.element.classList.contains('e-active')) {
            this.undoBtn.iconCss = 'e-icons e-undo-icon';
        } else {
            this.undoBtn.iconCss = 'e-icons e-redo-icon';
        }
    }

    public filterBtnClick() { 
        if (this.filterBtn.element.classList.contains('e-active')) {
            this.filterBtn.iconCss = 'e-icons e-filter-icon';
        } else {
            this.filterBtn.iconCss = 'e-icons e-filternone-icon';
        }
    }

    public hideBtnClick() { 
        if (this.visibleBtn.element.classList.contains('e-active')) {
            (document.getElementById('content') as HTMLElement).style.display = 'block';
            this.visibleBtn.iconCss = 'e-icons e-hide-icon';
            this.content = 'Hide';
        } else {
            (document.getElementById('content') as HTMLElement).style.display = 'none';
            this.visibleBtn.iconCss = 'e-icons e-show-icon';
            this.content = 'Show';
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));