title: angular4 mention input tag not working properly
body: <p>i am working with angular 4 mention tag input. I have created a api that is getting me all users list but i am not able to show it in angular mention list. I am confused what to do. Need help.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;input contenteditable="true" class="publisher-input" type="text" 
         id="comment" formControlName="comment" 
         placeholder="Add Your Comment" [mention]="userList" 
         [mentionConfig]="{triggerChar:'@',maxItems:10}" (searchTerm)="showUsers()"&gt;
  </code></pre>
  
  <p><strong>TS</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>userList: String[] = [];
  
  ngOnInit() {
    this.loadUsers();
  }
  
  loadUsers() {
    this.asd.getUsers().subscribe(results =&gt; {
      results['success'].forEach(element =&gt; {
        if (element.firstName &amp;&amp; element.middleName &amp;&amp; element.lastName) {
          // tslint:disable-next-line:no-construct
          this.userList.push(element.firstName + ' ' + element.middleName 
                             + ' ' + element.lastName);
        }
        if (!element.firstName) {
          // tslint:disable-next-line:no-construct
          this.userList.push(element.middleName + ' ' + element.lastName);
        }
        if (!element.middleName) {
          // tslint:disable-next-line:no-construct
          this.userList.push(element.firstName + ' ' + element.lastName);
        }
        if (!element.lastName) {
          // tslint:disable-next-line:no-construct
          this.userList.push(element.firstName + ' ' + element.middleName);
        }
      });
    });
  }
  
  showUsers() {
    this.loadUsers();
  }
  </code></pre>
  
  <p>I have used this package <a href="https://github.com/dmacfarlane/angular-mentions" rel="nofollow noreferrer">https://github.com/dmacfarlane/angular-mentions</a>. But not getting the data properly.</p>