Question 418371 in Html Question posted in
Some basic documentation can be found here.

Html – disable p-dropdown option when options are display in ng-template for looping them

i am trying to disable option in p-dropdown but i use ng-template for looping the options

here is my code
any suggestions ?
thanks

                            <p-dropdown
                                [options]="task.statusOptions"
                                optionLabel="name"
                                optionValue="id"
                                (onChange)="updateTaskCurrentStatus($event, task)"
                                appendTo="body"
                                [placeholder]="this.dropdownPlaceholder(task)"
                            >
                                <ng-template let-status pTemplate="status">
                                    <div [ngStyle]="{ color: status.uiSetting.color}" [ngClass]="{'pointer-events-none': status.enabled}">{{ status.name }}</div>
                                </ng-template>
                            </p-dropdown>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok so the only thing need to be done is to add disable key to each object display on the loop(without nothing else need in html)i actually saw this on other question and by mistake put the disabled key in the wrong place(thought maybe looping it in the ng-template having effect on it) so case close thanks for all the answers !


  2. 0

    You can configure a property disabled which will contain the flag to disable the option, then we can use [optionDisabled]="'disabled'" to set the property that disables the option.

    <p-dropdown
  [options]="countries"
  [(ngModel)]="selectedCountry"
  optionLabel="name"
  [showClear]="true"
  [optionDisabled]="'disabled'"
  placeholder="Select a Country"
>

    The object contains the flag that disables it.

    <p-dropdown
  [options]="countries"
  [(ngModel)]="selectedCountry"
  optionLabel="name"
  [showClear]="true"
  [optionDisabled]="'disabled'"
  placeholder="Select a Country"
>

    Full Code:

    import { Component, OnInit } from '@angular/core';
import { ImportsModule } from './imports';
@Component({
  selector: 'dropdown-group-demo',
  template: `
  <div class="card flex justify-content-center">
  <p-dropdown
    [options]="countries"
    [(ngModel)]="selectedCountry"
    optionLabel="name"
    [showClear]="true"
    [optionDisabled]="'disabled'"
    placeholder="Select a Country"
  >
    <ng-template pTemplate="selectedItem">
      <div class="flex align-items-center gap-2" *ngIf="selectedCountry">
        <img
          src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png"
          [class]="'flag flag-' + selectedCountry.code.toLowerCase()"
          style="width: 18px"
        />
        <div>{{ selectedCountry.name }}</div>
      </div>
    </ng-template>
    <ng-template let-country pTemplate="item">
      <div class="flex align-items-center gap-2">
        <img
          src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png"
          [class]="'flag flag-' + country.code.toLowerCase()"
          style="width: 18px"
        />
        <div>{{ country.name }}</div>
      </div>
    </ng-template>
  </p-dropdown>
</div>

  `,
  standalone: true,
  imports: [ImportsModule],
})
export class DropdownTemplateDemo implements OnInit {
  countries: any[] | undefined;

  selectedCountry: string | undefined;

  ngOnInit() {
    this.countries = [
      { name: 'Australia', code: 'AU', disabled: true },
      { name: 'Brazil', code: 'BR' },
      { name: 'China', code: 'CN', disabled: true },
      { name: 'Egypt', code: 'EG' },
      { name: 'France', code: 'FR', disabled: true },
      { name: 'Germany', code: 'DE' },
      { name: 'India', code: 'IN', disabled: true },
      { name: 'Japan', code: 'JP' },
      { name: 'Spain', code: 'ES', disabled: true },
      { name: 'United States', code: 'US' },
    ];
  }
}

    Stackblitz Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search