ejs-sidebar not working on component change in main content

[Shriram Chavan, Omkar]

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

   <div>

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

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

   (moduleCertificate)="getModuleCertificate($event)"></im-oelc-course-breakdown>

</div>

</ejs-sidebar>

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

</div>

   <ng-template #notShowAssessmentSection>

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

   (CompleteChapter)="CompleteChapter($event)"></im-content-viewer>

   </ng-template>

</div>

[SureshRajan Alagarsamy]

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 :

[app.component.html]

 

<div class="maincontent">

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

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

    </div>

    <ng-template #showComponentTwo>

      <ejs-listview

        id="listView"

        #listview

        cssClass="e-list-template"

        [dataSource]="inboxData"

        [fields]="fields"

        (select)="onListSelect($event)"

      >

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

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

            <span

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

            ></span>

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

          </div>

        </ng-template>

      </ejs-listview>

    </ng-template>

  </div>

 

[app.component.ts]

 

export class AppComponent {

 

    ....

    showComponentOne = true;

    ....

 

    toolbarCliked(args: ClickEventArgs) {

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

          this.sidebarobj.toggle();

          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.

Regards,
Suresh.