Add toggle button in Angular Toolbar component

27 Apr 202410 minutes to read

Toolbar supports to add a toggle Button by using the template property. Refer below steps

• By using Toolbar template property, pass required HTML String to render toggle button.

      <e-item template='<button class="e-btn" id="media_btn"></button>'></e-item>

• Now render the toggle Button into the targeted element in Toolbar created event handler and bind click event for it. On clicking the toggle Button, change the required icon and content based on 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));