PrimeNG SplitButton: How to pass an argument to the sub-menu?

Question

I try to use a PrimeNG SplitButton.

@Component({
  selector: 'test',
  template: `
  
  <ul>
    <li *ngFor="let l of lst">{{ l }}
        <p-splitButton label="foo" (onClick)="foo (l)" [model]="menu"></p-splitButton>
    </li>
  </ul>
`
})


export class TestComponent
{
    lst : string [] = ["abc", "123", "xyz"];
    menu : MenuItem [] = [{label: "bar", command: (e) => { this.bar (e) }}];

    foo (x)
    {
        console.log ("foo", x);
    }
    
    bar (x)
    {
        console.log ("bar", x);
    }
}

How can I pass the value of the iteration of lst (l) to bar? I want use it the same way as I do it with foo but not sure how to get the argument down to menu.

Answer 1

You can use the onDropdownClick event to store the index of the splitButton you're currently opening and then use it inside bar, like this:

@Component({
  selector: 'test',
  template: `
  <ul>
    <li *ngFor="let l of lst">{{ l }}
        <p-splitButton label="foo" (onClick)="foo(l)" (onDropdownClick)="dropdownClickHandler(l)" [model]="menu"></p-splitButton>
    </li>
  </ul>
`
})
export class TestComponent
{
    lst : string [] = ["abc", "123", "xyz"];
    menu : MenuItem [] = [{label: "bar", command: () => { this.bar() }}];

    currentIndex: number;

    foo (x)
    {
        console.log("foo", x);
    }
    
    bar ()
    {
        console.log("bar", this.currentIndex);
    }

    dropdownClickHandler(index) {
        this.currentIndex = index;
    }
}

Answer 2

I figured out this.

<p-splitButton label="foo" (onClick)="foo (l)" [model]="getMenu (l)"></p-splitButton>



getMenu (x):any
{
    return [{label: "bar", command: (e) => { this.bar (x) }}];
}

Is it bad style to cover it with a function in Angular??

Answer 3

const getItems = function(data) {
    return [
    {
        label: 'Update',
        icon: 'pi pi-refresh',
        "row-data": data,
        command: (d) => {
            const rowData = d.item["row-data"] || arguments[0];
            console.log(rowData);
        }
    }]    
}
......
<DataTable>
    <Column>
        <template #body="{ data }">
            <SplitButton label="Save" icon="pi pi-plus"  :model="getItems(data)" />
        </template>
    </Column>
</DataTable>