Dropdown: Cannot read properties of null (reading 'classList')

[mountpoint]

When I use p-dropdown inside ng-template, I'm getting TypeError: Cannot read properties of null (reading 'classList').

Here is my code. As you see, p-dropdown inside ng-template.

<header class="header">
  <ng-container
    [ngTemplateOutlet]="menuContent"
    [ngTemplateOutletContext]="{ visibilityClass: 'mobile--hide' }"></ng-container>

  <div class="mobile--show">
    <i class="pi pi-bars menu__icon" (click)="onShowMobileMenu()"></i>

    <p-sidebar [(visible)]="mobileMenuVisible" position="right" styleClass="sidebar__menu">
      <ng-container
        [ngTemplateOutlet]="menuContent"
        [ngTemplateOutletContext]="{ className: 'mobile-menu' }"
      ></ng-container>
    </p-sidebar>
  </div>
</header>

<ng-template #menuContent let-visibilityClass="visibilityClass" let-className="className">
  <nav [class]="visibilityClass">
    <ul class="menu" [class]="className">
      @for (item of menuItems; track item.link) {
        <li>
          <a class="menu__link" [routerLink]="item.link" routerLinkActive="menu__link--active">
            {{ item.text | async }}
          </a>
        </li>
      }
    </ul>
  </nav>

  <p-dropdown
    [(ngModel)]="selectedLanguage"
    [options]="languages"
    [class]="className + ' mobile-menu__language ' + visibilityClass"
    appendTo="body"
    optionValue="value"
    optionLabel="name"
    (onChange)="onLanguageChange($event)"
  ></p-dropdown>
</ng-template>

Error throws on second line in this method, because there is no parentElement for p-dropdown inside ng-template.

updatePlaceHolderForFloatingLabel() {
        const parentElement = this.el.nativeElement.parentElement;
        const isInFloatingLabel = parentElement.classList.contains('p-float-label'); // <<<<<<< HERE
        if (parentElement && isInFloatingLabel && !this.selectedOption) {
            const label = parentElement.querySelector('label');
            if (label) {
                this._placeholder.set(label.textContent);
            }
        }
    }

I made simple solution: I wrapped p-dropdown via some div, but it broke my layout. I'll fix my layout, that's no problem.

Maybe it will be better to fix this line of code like this (to avoid such problems in other developers):

const isInFloatingLabel = parentElement?.classList?.contains('p-float-label');

Environment

any

Reproducer

No response

Angular version

17.3.8

PrimeNG version

17.16.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.10.0

Browser(s)

any

Steps to reproduce the behavior

No response

Expected behavior

No response

[Mehmet Çetin]

Hi,

Could you please share a stackblitz example so we can identify the issue clearly?

[mountpoint]

@mehmetcetin01140 unfortunately I couldn't reproduce this bug on stackblitz. It's something related to my project, but I didn't find what exactly. I'll close the issue.