Any library for textbox with autocomplete for Angular?

Question

I'm looking to implement a text box with autocomplete for each word I started to type. Each word would come from different sources depending on the context. Basically, its a feature that exist in most modern IDE.

I created a video from VS code to illustrate what I'm saying: https://recordit.co/mk1yY0yBy9

Is there any library that works with Angular for this kind of feature?

Answer 1

I would say you can implement a nice widget yourself, as I don't managed to find such package, I've create a very simple starting code that do what you wish. (The data is saved as a json object) Working prototype.

Template:

<input [(ngModel)]="selectedLevel" (keyup)="changed()" />
<div *ngFor="let option of currentOptions" (click)="setOption(option)">
  {{option}}
</div>

Script

root = { 
  array: {
    remove:{
      element:{}
    }
  },
  args: {},
  other: {}
};
selectedLevel = '';
currentOptions = []; 

changed(){
  let levels = this.selectedLevel.split('.');
  let crawl = this.root;
  while(levels.length > 0){
    let current = levels[0];
    let test = crawl[current];
    if(test) crawl = test;
    this.currentOptions = Object.keys(crawl).filter(x=>x.includes(current));
    levels.shift();
  }
}

setOption(option){
  let index = this.selectedLevel.lastIndexOf('.');
  if (index == -1){
    this.selectedLevel = option;
  } else {
    this.selectedLevel = this.selectedLevel.substring(0,index) + '.' + option;
    }
  this.changed();
}