How to add custom message in dropdown in Angular 7 instead of ngui-auto-complete in this code?

Question

I tried adding a custom message in the dropdown when no character matches are found in the dropdown list. Here is the code for the same, which uses ngui-auto-complete to show "No Result Found". I want it to display "Not found, do you want to add one? How to fix that?

  <div class="row">
            <div class="form-group">
              <div class="col-md-6 col-md-offset-3">
                <div class="floating-label" ngui-auto-complete [source]="activeSkills"
                  value-formatter="name" list-formatter="name"
                  [match-formatted]="true" [auto-select-first-item]="true"
                  (ngModelChange)="myCallback('skill',$event)" [re-focus-after-select]="false">
                  <input [(ngModel)]="skillObjName" id="skillMem" class="floating-input" placeholder=" "
                      autocomplete="off" name="skillMem">
                  <label for="skillMem" class="formLabel">Tag the skills</label>
                </div>
                <div class="error" *ngIf="f.submitted && (!skillName || skillName.length == 0)">
                  {{constants.skillTagging}}
                </div>
              </div>
            </div>
          </div> 

I tried using custom messages with [NoMatchFound], to add a custom dropdown message when no matches are found in the dropdown list, but it is not working. I am using Angular version 7. I want to add a custom message in dropdown instead of the default "ngui-auto-complete" which uses the message in the dropdown "No Result Found". How to add a customized message in the dropdown?

Answer 1

From their documentation you can add a custom string for empty results using input no-match-found-text.

stackblitzDEMO