1. Feedback
  2. Angular
  3. 11920

Welcome to the Angular feedback portal. We’re happy you’re here! If you have feedback on how to improve the Angular, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Allow toolbar items to be disabled via binding

We would like to be able to disable toolbar items via binding instead of calling enableItems.

Code should be able to look something like the following.  Current we get an error "Can't Bind to 'disabled' since it isn't a known property of 'e-item'."

  <ejs-toolbar #existingItemsToolbar>
    <e-items>
      <e-item text="Add New" prefixIcon="e-add" (click)="onAddNewClick()"></e-item>
      <e-item text="Edit" prefixIcon="e-edit" (click)="onEditClick()" [disabled]="(selectedEntity$ | async) == null"></e-item>
    </e-items>
  </ejs-toolbar>
The ItemDirective does have a disabled property, but it doesn't seem to work.

This works if you use a buttons within a template, but that takes significantly more code:




  <ejs-toolbar #existingItemsToolbar>
    <e-items>
      <e-item>
        <ng-template #template>
          <button
            ejs-button
            class="e-flat"
            iconCss="e-add e-icons"
            content="Add New"
            (click)="onAddNewClick()"
          ></button>
        </ng-template>
      </e-item>
      <e-item>
        <ng-template #template>
          <button
            ejs-button
            class="e-flat"
            iconCss="e-edit e-icons"
            content="Edit"
            (click)="onEditClick()"
            [disabled]="(selectedEntity$ | async) == null"
          ></button>
        </ng-template>
      </e-item>
    </e-items>
  </ejs-toolbar>