Add toggle button in Angular Toolbar component

22 Sep 202510 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. Follow the steps below to implement toggle button functionality:

• Use the Toolbar item’s template property to define the HTML structure for the toggle button.

      <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.

app.component.html

<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>

app.component.ts

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 DefaultToolbarComponent {
    @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';
        }
    }
}

main.ts

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