Angular 2: How to conditionally Disable or Enable the Add and Remove Button in PrimeNG PickList

Issue

I am new to Angular 2 and i am implementing dual list box using pickList from PrimeNG (https://www.primefaces.org/primeng/#/picklist).
I am listing table data of 3 columns inside PrimeNG pickList with ADD and REMOVE button. Could anyone please let me know how to initially disable both ADD and REMOVE button until the user selects any the data in pickLIst?

Scenario :
I have two container in pickList: Source and Target.

• If user selects any row or data from Source container, then REMOVE button should be disabled and ADD button should be enabled.
• Similarly if user selects any data from Target container, then ADD button should be disabled and REMOVE button should be enabled.
• If no data is selected in both Source and Target containers, then both ADD and REMOVE buttons should be disabled

Here is my code:

 <p-pickList [source]="data['brandList']" [target]="data['modelList']" [responsive]="true"
                           dragdrop="true">
            <ng-template let-brandList pTemplate="item">
                <div style="position: relative;height: 29px;top: 7px;">
                    <table  style="margin: 5px;text-align: center;position: relative;bottom: 14px;font-size: 13px;right: 4px;">
                        <tr style="border-bottom: 1px solid #d3d5d8">
                            <td style="border-right: 1px solid #d3d5d8">
                                <span>{{brandList.productClass}}</span>

                            </td>
                            <td style="border-right: 1px solid #d3d5d8">
                                <span title="{{brandList.model}}" style="display: inline-block;width: 69px;white-space: nowrap;overflow: hidden !important;text-overflow: ellipsis;top: 3px;position: relative;">{{brandList.model}}</span>

                            </td>
                            <td style="border-right: 1px solid #d3d5d8">
                                <span>{{(brandList.brand).trim()}}</span>

                            </td>
                        </tr>

                    </table>

                </div>

            </ng-template>

        </p-pickList>

Could anyone suggest me some solution how to achieve this in PrimeNG pickList?

Solution

You can do like below.

document.getElementsByClassName('ui-picklist-buttons')[0].getElementsByClassName('ui-picklist-buttons-cell')[0]
        .getElementsByTagName('button')[0].setAttribute('disabled', 'disabled');

But this is not right method to disable ;-)

Answered By - prashanth A