Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Confused Coder
30
Create Single Click vs Click Dropdown List
posted 
Below is some code I use to display a + sign and then a popup list with options. 
Some options are conditional like they require a row to be selected so that we 
have a id to take action on or delete etc. All that works fine but i would like 
to clean it up a bit. In some cases there might be only one item in the plusAction 
Array, in which i would like to go and call that fuction / action directly.

 I could modify the button like this
 <ng-container *ngIf="plusActions?.length > 1; else oneItem">
and use the oneItem Template, but how can i get the correct click action into the click handler of that button


<button *ngIf="plusActions" [igxToggleAction]="menuAddActions" type="button"
           class="action__grid"
           [igxToggleOutlet]="outletAddActions"
           [igxDropDownItemNavigation]="menuAddActions"
           igxButton="icon" igxRipple>
           <igx-icon>add</igx-icon>
</button>
<igx-drop-down #menuAddActions>
   <ng-container *ngFor="let item of plusActions">

      <igx-drop-down-item *ngIf="showPlusAction('modal', item)">
          <button igxButton="flat" igxRipple (click)="item.click(agGridBase)">
            {{ item.label }}
          </button>
      </igx-drop-down-item>

      <igx-drop-down-item *ngIf="showPlusAction('list-action', item)">
         <app-list-action [list]="{DocId: null, name: null, items: selectedRowIds}"></app-list-action>
      </igx-drop-down-item>
   </ng-container>
  • 1560
    Offline posted

    Hello,

    Thank you for the provided code snippet.

    I have been looking into your question and prepared a small sample in order to demonstrate how such behavior could be achieved.

    In order to have different behavior depending on the items in the plusActions array, my suggestion is to handle the button click event and if the array has more than one option to call a function that would open the drop-down, otherwise, to call a function that would execute the only option in the dropdown.

      <button
    #btn
    igxButton="icon"   
    (click)="plusActions.length > 1 ? openDropDown(menuAddActions, btn) : click()">
    <igx-icon #icon>add</igx-icon>
  </button>
 
  <igx-drop-down #menuAddActions (onSelection)="actionChange($event)">
    <igx-drop-down-item *ngFor="let action of plusActions" [value]="action">
      {{ action }}
    </igx-drop-down-item>
  </igx-drop-down>

     

      Having in mind that the dropdown would not be opened on each click and since you are handling through a function, you should not set the button igxToggleOutlet and igxDropDownItemNavigation properties. Instead, in the openDropDown we will pass as arguments the drop-down and the button, so we could define the position where the dropdown would be opened using an ovelay settings and position strategy:

      openDropDown(dropdown: IgxDropDownComponent, target) {
    if (dropdown.collapsed) {
      const overlaySettings: OverlaySettings = {
        modal: false,
        target: target,
        positionStrategy: new ConnectedPositioningStrategy(
          this.positionSettings
        )
      };
      dropdown.open(overlaySettings);
    }
  }

    Here could be found my sample for your reference. For the purposes of the example, initially, the drop-down would have one item and on click, it would open a dialog. New items would be added/removed on row selection/deselection.

    Please test the attached sample on your side and let me know if I may be of any further assistance.

    Sincerely,

    Teodosia Hristodorova

    Associate Software Developer