Angular 10+ | ng-select what is the default value of appendTo

Question

I'm using the same component on top of a modal and on a regular page.

<ng-select
[items]="obs$ | async"
[appendTo]="body"
>
</ng-select>

This works for the regular page, but for a modal, the select values go behind the modal. What will be the value of appendTo if I don't provide it with any value.

<ng-select
[items]="obs$ | async"
>
</ng-select>

this works for modal but not for the regular page. The select menu gets clipped

<ng-select
[items]="obs$ | async"
[appendTo]="null" -> this doesn't work (i.e) the select options are behind the modal
>
</ng-select>

Answer 1

From looking at the source code of ng-select, the default is to place the dropdown directly inside the element. For a modal, this can cause problem by clipping or showing scroll bar.

You should append it to the body and change the z-index of .ng-dropdown-panel in css to be greater than the modal.

Answer 2

The default value for appendTo is the ng-select component itself. It will render the select panel as a child of that component. By passing a selector for appendTo, you are telling the component that it should find that element in the DOM and attach it as a child there.

This is useful because sometimes ng-select may be used inside of a parent element with a fixed height and scroll hidden, and this would cause some of the options to be unviewable. By passing a value to the selector of a parent element that doesn't have those CSS properties, ie [appendTo]=".some-scrollable-content", the options in the panel can be reached.

If you are having trouble using this in a modal, you could try using the modal panel for the appendTo. Here is further details on appendTo property provided by the ng-select team.

As for [appendTo]="null", I think that is equivalent to not defining it at all. Here is the source code where the property is used, and the if statement would be passed by for both null or undefined.

private _onSelectionChanged() {
  if (this.isOpen && this.multiple && this.appendTo) {
    // Make sure items are rendered.
    this._cd.detectChanges();
    this.dropdownPanel.adjustPosition();
  }
}

Here is a link to the code.