We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ejs-sidebar not working on component change in main content

I am using ejs-sidebar which contain multiple wrapper class bases on if else condition. Initial component is able to toggle on hamburger menu click but when we switch between wrapper class it is not working.

here is my code

<ejs-sidebar id="defaultSidebar" #sidebar class="default-sidebar" width="300px" position="Left" target=".maincontent" >


   <im-oelc-course-breakdown [isPreview]="isPreview" [CurrentChapterId]="currentChapterId" Coursecontents]="courseDetails.modules" [nextChapterId]="nextChapter?.id"

   [nextChapterCompleted]="nextChapter?.isCompleted" (selectedChapter)="viewChapter($event)" (isClickedOntakeAssessment)="takeAssessment($event)"




<div class="d-flex flex-column maincontent">

<div *ngIf="showAssessmentSection;else notShowAssessmentSection">

<im-oelc-assessment-info [breadcrumbObject]="pageBcrumbs" [beginAssessmentModel]="beginAssessmentModel" (nextChapter)="viewNextChapter()"> </im-oelc-assessment-info>


   <ng-template #notShowAssessmentSection>

   <im-content-viewer *ngIf="latestChapter" [Chaptercontents]="latestChapter"




1 Reply

SA SureshRajan Alagarsamy Syncfusion Team February 21, 2023 03:39 PM UTC

Hi Shriram,

Greetings from Syncfusion support.

Based on shared details and code snippet, we have understood that you want to achieve the component change in the Sidebar toggle click. We have prepared sample based on your requirement and able to achieve the desired functionality where the first toggle click, opens the Sidebar and renders our Button component in the main content and the second toggle click, closes the Sidebar and renders our ListView component in the main content. Refer to the below code snippet for further assistance.

Code Snippet :



<div class="maincontent">

    <div *ngIf="showComponentOne; else showComponentTwo">

      <button ejs-button id="button">Normal Button</button>


    <ng-template #showComponentTwo>









        <ng-template #template let-data="">

          <div class="e-list-wrapper e-list-avatar e-list-multi-line">


              class="e-avatar e-avatar-circle e-icon sf-icon-profile"


            <span class="e-list-item-header">{{ data.text }}</span>

            <span class="e-list-content">{{ data.subject }}</span>

            <span class="e-list-text">{{ data.message }}</span>









export class AppComponent {



    showComponentOne = true;



    toolbarCliked(args: ClickEventArgs) {

        if (args.item.tooltipText == 'Menu') {


          if (this.sidebarobj.isOpen) {

            this.showComponentOne = true;

          } else {

            this.showComponentOne = false;






For your reference we have attached the sample.

Sample : https://stackblitz.com/edit/angular-yypi4w?file=src%2Fapp.component.ts,src%2Fapp.component.html,src%2Fapp.component.css

Check out the shared details and get back to us if you need any further assistance.


Live Chat Icon For mobile
Up arrow icon