CODEWITHSUNDEEP
angularprimeng
greenbanzai
greenbanzai

Reputation: 99

PrimeNg disable accordion expand button

Is there a way to conditionally disable the expand button in PrimeNg accordion without disabling the whole header? I have some other buttons in the header and want them to be clickable, I only want to disable the expand button. I am displaying some items in each of accordion's body but if there is no item I want to disable to expand button. I failed to find an easy way to do that based off documentation.

Upvotes: 0

Views: 1432

Answers (3)

Ilias Et-taymy
Ilias Et-taymy

Reputation: 1

i added a css proprty to let my button enabled even when the accordion is disabled and it worked : pointer-events: auto !important;

Upvotes: 0

Nguyễn Hải Nam
Nguyễn Hải Nam

Reputation: 1

I faced a similar problem. Here is my solution.

I created a signal to control the accordian status. The initial false value means that the accordion is not disabled.

export class YourComponent {
    accordionTabDisabled = signal<boolean>(false);
}

Next, bind it to your accordionTab component. When handling the onClick event of the button, I set the signal to true. I emit an event later and set the signal to false when handling it so that the accordion is again enabled. In this case, I handle onHide event.

<p-accordion>
    <p-accordionTab [disabled]="accordionTabDisabled()">
        <ng-template pTemplate="header">
            <h1>Accordion Header</h1>
            <p-button (onClick)="accordionTabDisabled.set(true)"></p-button>
        </ng-template>
        <p-dialog header="My dialog" (onHide)="accordionTabDisabled.set(false)">
            Dialog content
        </p-dialog>
    </p-accordionTab>
</p-accordion>

Upvotes: 0

Shai
Shai

Reputation: 3872

You can use the disabled input of the p-accordionTab component, like this:

<p-accordion>
    <p-accordionTab header="Header I" [disabled]="items1.length === 0">
        <div *ngFor="let item of items1">{{item.caption}}</div>
    </p-accordionTab>

    <p-accordionTab header="Header II" [disabled]="items2.length === 0">
        <div *ngFor="let item of items2">{{item.caption}}</div>
    </p-accordionTab>
</p-accordion>

Upvotes: 1

Related Questions