memory performance issue after hidding buttons

[gtteamamxx]

If we hide buttons they are still visible in DOM. And also that div should not be rendered.

This is performance issue because we don't want that buttons in DOM.

Angular 14

[kolkov]

Hello!

You're absolutely right! Currently toolbarHiddenButtons uses [hidden] CSS attribute, which keeps elements in DOM.

Current Implementation:

<!-- Hidden buttons still in DOM -->
<button aeButton [hidden]="isButtonHidden('bold')">Bold</button>

Performance Impact:

• Hidden buttons remain in DOM
• Memory footprint larger than needed
• Unnecessary event listeners attached
• Extra <div> wrappers rendered

Proper Solution

Use *ngIf instead of [hidden]:

<!-- Buttons not rendered at all -->
<button aeButton *ngIf="!isButtonHidden('bold')">Bold</button>

Benefits:

• ✅ Not in DOM (better performance)
• ✅ No memory overhead
• ✅ Cleaner HTML output
• ✅ Faster initial render

Implementation

Change needed in ae-toolbar.component.html:

- <button aeButton [hidden]="isButtonHidden('bold')" ...>
+ <button aeButton *ngIf="!isButtonHidden('bold')" ...>

Apply to all toolbar buttons (~30+ buttons).

Tracking

This is a valid performance optimization for v3.1.0.

Labels:

• enhancement - Performance improvement
• good first issue - Straightforward change
• help wanted - Community PR welcome

Estimated Impact:

• 10-30% smaller DOM with many hidden buttons
• Faster initial render
• Less memory usage

Would be happy to review a PR! The change is mostly search-and-replace in the toolbar template.

Thanks for the detailed report with screenshot!