I'm using ng-select to select multiple values from a large list that is remotely loaded depending on what the user types in the box. Here are my requirements:

1. Tags added dynamically
2. Dropdown is not displayed for already selected values. It is only for typeahead of available, unselected values.

Here are the problems that I've run into so far:

• Selected tags do not get displayed if not part of the items list.
• Using the tag objects as an array with [(ngModel)] makes ng-select treat it like the value doesn't exist at all. ng-select seems to only use IDs for [(ngModel)] when [mutiple]=true, as opposed to the selected object when [multiple]=false
• The tagsInput$ observable doesn't get fired if [isOpen]=false

I have verified that tagsService is operating correctly.

Current View:

<ng-select [items]="tags$ | async"
           bindValue="name"
           [loading]="tagsLoading"
           [typeahead]="tagsInput$"
           [multiple]="true"
           [isOpen]="tagsOpen"
           [searchFn]="filterSelectedTags"
           [(ngModel)]="selectedTagIds"></ng-select>

Current Controller:

class TagFormComponent {

  public tags$: Observable<Tag[]>;
  public tagsLoading: boolean;
  public tagsInput$: Subject<string>;
  public tagsChanger$: Subject<Tag[]>;
  public selectedTags: Tag[];
  public selectedTagIds: number[];
  public tagsOpen: boolean;

  constructor(private tagService: TagService) {

    this.tagsInput$ = new Subject<string>();
    this.tagsChanger$ = new Subject<Tag[]>();
    this.tagsChanger$.subscribe( tags => {
      this.selectedTagIds = tags.map(t => t.id);
      this.selectedTags = tags;
    });
    this.tags$ = concat(
      this.tagsChanger$,
      this.tagsInput$.pipe(
        debounceTime(200),
        distinctUntilChanged(),
        tap( () => {
          this.tagsOpen = true;
          this.tagsLoading = true;
        }),
        switchMap(q => this.tagService.search(q).pipe(
          catchError( err => { this.tagsLoading = false; console.error(err); return of([] ); }),
          tap( () => this.tagsLoading = false)
        ))
      )
    );

    this.tagsChanger$.next(this.assetGroup.tags);
  }

  public matcher(a: any, b: any): boolean {
    return !!a && b && a.id === b.id;
  }

  public filterSelectedTags(_q: string, item: Tag) {
    return !this.selectedTagIds.includes(item.id);
  }

  public tagAdded() {
    this.tagsOpen = false;
  }
}

I'm using ng-select to select multiple values from a large list that is remotely loaded depending on what the user types in the box. Here are my requirements:

1. Tags added dynamically
2. Dropdown is not displayed for already selected values. It is only for typeahead of available, unselected values.

Here are the problems that I've run into so far:

• Selected tags do not get displayed if not part of the items list.
• Using the tag objects as an array with [(ngModel)] makes ng-select treat it like the value doesn't exist at all. ng-select seems to only use IDs for [(ngModel)] when [mutiple]=true, as opposed to the selected object when [multiple]=false
• The tagsInput$ observable doesn't get fired if [isOpen]=false

I have verified that tagsService is operating correctly.

Current View:

<ng-select [items]="tags$ | async"
           bindValue="name"
           [loading]="tagsLoading"
           [typeahead]="tagsInput$"
           [multiple]="true"
           [isOpen]="tagsOpen"
           [searchFn]="filterSelectedTags"
           [(ngModel)]="selectedTagIds"></ng-select>

Current Controller:

class TagFormComponent {

  public tags$: Observable<Tag[]>;
  public tagsLoading: boolean;
  public tagsInput$: Subject<string>;
  public tagsChanger$: Subject<Tag[]>;
  public selectedTags: Tag[];
  public selectedTagIds: number[];
  public tagsOpen: boolean;

  constructor(private tagService: TagService) {

    this.tagsInput$ = new Subject<string>();
    this.tagsChanger$ = new Subject<Tag[]>();
    this.tagsChanger$.subscribe( tags => {
      this.selectedTagIds = tags.map(t => t.id);
      this.selectedTags = tags;
    });
    this.tags$ = concat(
      this.tagsChanger$,
      this.tagsInput$.pipe(
        debounceTime(200),
        distinctUntilChanged(),
        tap( () => {
          this.tagsOpen = true;
          this.tagsLoading = true;
        }),
        switchMap(q => this.tagService.search(q).pipe(
          catchError( err => { this.tagsLoading = false; console.error(err); return of([] ); }),
          tap( () => this.tagsLoading = false)
        ))
      )
    );

    this.tagsChanger$.next(this.assetGroup.tags);
  }

  public matcher(a: any, b: any): boolean {
    return !!a && b && a.id === b.id;
  }

  public filterSelectedTags(_q: string, item: Tag) {
    return !this.selectedTagIds.includes(item.id);
  }

  public tagAdded() {
    this.tagsOpen = false;
  }
}

• javascript
• angular
• rxjs
• angular-ngselect

• For anyone stumbling upon this. I don't think [items] should be async. ng-select – godhar Commented Jan 6, 2022 at 20:49
• Why not? tags$ is an observable. – eltiare Commented Jan 7, 2022 at 19:31
• In the documentation the type for [items] is Array<any>. Not Observable<Array<any>>. – godhar Commented Jan 8, 2022 at 10:19
• 1 Yeah, that's why there's the async pipe there. – eltiare Commented Jan 8, 2022 at 17:13
• The async pipe only declares how angular should support your array in the template. It has no bearing on the original type, as declared by the package. – godhar Commented Jan 10, 2022 at 10:49

3 Answers 3

Use the built-in "hideSelected" property of the ng-select to hide already selected items.

As for "Selected tags do not get displayed if not part of the items list", looks like you have to preload already selected items. They should always be added to the "items" list. Because of "hideSelected" they will not be shown in dropdown anyway. So ponent should first load existing items by their IDs and add them to "items" list, then ponent has to load items according to the typeahead and add them to the "items" list. This way existing items will always be available for ng-select.

You can easily achieve this by using mat-autoplete in bination with mat-option. See plete examples for this here on the material-angular ponents website.

Or for multi-select you can bine mat-autoplete with mat-option and a mat-chip-list. See plete examples for this here on the material angular ponents website

See also a similar question with suggestions here

In case none of those examples suffice your needs you can maybe elaborate and I could add more details to my answer.

I believe this custom tags example is exactly what you're looking for. You can dynamically add new tags if not found and the selected items are hidden.

TS:

@Component({
    selector: 'ng-tags-custom-example',
    templateUrl: './tags-custom-example.ponent.html',
    styleUrls: ['./tags-custom-example.ponent.scss'],
    standalone: false
})
export class TagsCustomExampleComponent implements OnInit {
    selectedCompanies;
    panies: any[] = [];
    paniesNames = ['Uber', 'Microsoft', 'Flexigen'];

    ngOnInit() {
        this.paniesNames.forEach((c, i) => {
            this.panies.push({ id: i, name: c });
        });
    }

    addTagFn(name) {
        return { name: name, tag: true };
    }
}

HTML:

<ng-select [items]="panies" [addTag]="addTagFn" [hideSelected]="true" 
multiple="true" bindLabel="name" [(ngModel)]="selectedCompanies">
</ng-select>

The items you pass to ng-select should be an array, not an Observable, for the functions to work properly. If you need to frequently fetch new items, then you should store all the custom tags in separate array and concat it to the fetched tags in your subscription.