title: Angular ng-select: how to make ng-option unselectable?
body: <p>it maybe an easy thing to resolve but I couldn't achive what I wanted by myself. So lets get to the problem - I've added an option that is letting me to add another options for my options list and it looks like this:</p>
  <p><a href="https://i.stack.imgur.com/LbMhB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LbMhB.png" alt="enter image description here" /></a></p>
  <p>The problem is when I click on the text input it's just selecting this even when I use <code>stopPropagation</code> and <code>preventDefault</code>:</p>
  <p><a href="https://i.stack.imgur.com/iyGhq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iyGhq.png" alt="enter image description here" /></a></p>
  <p>This is how my component looks like:</p>
  <pre><code>&lt;ng-select
    class=&quot;ng-select-dropdown-width&quot;
    bindLabel=&quot;Label&quot;
    bindValue=&quot;Label&quot;
    appendTo=&quot;body&quot;
    dropdownPosition=&quot;bottom&quot;
    [placeholder]=&quot;fieldAttributes?.List?.Placeholder&quot;
    [multiple]=&quot;fieldAttributes?.List?.AllowUserMultiSelect&quot;
    [(ngModel)]=&quot;value&quot;
    (ngModelChange)=&quot;writeValue($event)&quot;&gt;
    &lt;ng-option &gt;
      &lt;div class=&quot;form-control&quot;&gt;
        &lt;div class=&quot;row add-item-control&quot;&gt;
          &lt;input type=&quot;text&quot;
                 class=&quot;col-10&quot;
                 placeholder=&quot;Add option&quot;
                 [(ngModel)]=&quot;addInputOption&quot;
                 [ngModelOptions]=&quot;{standalone: true}&quot;
                 (focusout)=&quot;addInputOption=''&quot;
                 (click)=&quot;addOption($event)&quot;
                 (keydown)=&quot;saveOption($event)&quot;/&gt;
          &lt;div *ngIf=&quot;addInputOption.length&quot;
               class=&quot;col cc-grey-400-txt&quot;&gt;{{'diaries.components.addItem' | translate}}&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/ng-option&gt;
    &lt;ng-option *ngFor=&quot;let option of filteredPickList | async&quot; [value]=&quot;option.Label&quot;&gt;
      {{option.Label}}
    &lt;/ng-option&gt;
  &lt;/ng-select&gt;
  </code></pre>
  <p>And the methods for handling <code>add</code> input:</p>
  <pre><code>  addOption(event) {
      event.stopPropagation();
      event.preventDefault();
    }
  
    saveOption(event) {
      if (event.keyCode === 13 || event.keyCode === 32) {
        event.stopPropagation();
        if (event.keyCode === 13) {
          this.isPickListUpdated = true;
          this.store.dispatch(new Loading('shared.saving'));
          this.componentsApiService.addPicklistItem(this.fieldAttributes.List.ID, this.addInputOption)
            .pipe(
              finalize(() =&gt; {
                this.store.dispatch(new StopLoading('shared.saving'));
              }),
              takeUntil(this.componentDestroyed$))
            .subscribe(result =&gt; {
              this.filteredPickList.next(result.PickListItems);
              this.updateItemsList(this.fieldAttributes.List.ID, result.PickListItems);
              this.value = this.addInputOption;
              this.addInputOption = '';
            }, ({error}) =&gt; {
              this.snackBarService.error(error.message);
            });
        }
      }
    }
  
    private updateItemsList(listID: string, updatedList: PickListItem[]) {
      for (const field of this.component.Schema) {
        if (field.Attributes.List &amp;&amp; field.Attributes.List.ID === listID) {
          field.Attributes.List.PickListItems = updatedList;
        }
      }
    }
  </code></pre>
  <p>EDIT1:
  Maybe the problem is that ng-select is not in the DOM but I don't know what can I do with such a case:</p>
  <p><a href="https://i.stack.imgur.com/wWVVE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wWVVE.png" alt="enter image description here" /></a></p>
  <p>EDIT2: setting <code>&lt;ng-option&gt;</code> as disabled makes that I'm able to type text in the input but it doesn't trigger any events so I can't handle keydown for example..</p>