items of tool bar not removed from DOM after destroying toolbar component where items of toolbar are rendered via template prop(id is attached to template property))

[Goutham]

Hi,

     

 We have used toolbar component ,and item of toolbar are rendered using template property(id of element is given as value) as shown below.

Html part:

Ts file part:

Why i used this type of rendering:

Using this type configuration,we are showing/hiding toolbar items dynamically depends upon logic.

Problem:

Every time ,we navigated away from  route which containing toolbar,the items are appended to DOM ,not removed from DOM when route (component which containing toolbar ) is destroyed.

Thank you.

[Karthigeyan Krishnamurthi]

Hi Goutham, 

 

Syncfusion greetings. 

 

Kindly use ng-template option to achieve your requirement and the below sample is made for your reference. 

https://stackblitz.com/edit/angular-xwee3v-2yxzxt?file=app.component.ts 

 

<ejs-toolbar height="60" #element width="100%"> 

  <e-items> 

    <e-item> 

      <ng-template #template> 

        <ejs-numerictextbox value="10"></ejs-numerictextbox> 

      </ng-template> 

    </e-item> 

    <e-item> 

      <ng-template #template> 

        <ejs-datepicker></ejs-datepicker> 

      </ng-template> 

    </e-item> 

    <e-item> 

      <ng-template #template> 

        <button class='e-btn'>Template</button> 

      </ng-template> 

    </e-item> 

  </e-items> 

</ejs-toolbar> 

 

Regards, 

Karthi