title: Display list of users using input value to add names to the list
body: <p>I am trying to display a list of users getting the value of an input and using it as a param to a <code>get()</code> method. I am getting the return of the <code>get()</code> and using push to insert it to an object, then trying to display this object in the template. </p>
  
  <p>I wanted to:</p>
  
  <ol>
  <li>Search for an user.</li>
  <li>Display this user.</li>
  <li>Search for another user.</li>
  <li>Display the other user along with the first one.</li>
  </ol>
  
  <p>But the template shows an error: </p>
  
  <pre><code>{ "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": true, "value": { "url": "http://localhost:3000/users", "body": null, "reportProgress": false, "withCredentials": false, "responseType": "json", "method": "GET", "headers": { "normalizedNames": {}, "lazyUpdate": null, "headers": {} }, "params": { "updates": [ { "param": "user", "value": "Teste", "op": "s" } ], "cloneFrom": null, "encoder": {}, "map": {} }, "urlWithParams": "http://localhost:3000/users?user=Teste" } }, "operator": { "concurrent": 1 } }, "operator": {} }, "operator": {} }
  </code></pre>
  
  <hr>
  
  <p>My component.ts:</p>
  
  <pre><code>import { HttpClient, HttpParams } from '@angular/common/http';
  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-info',
    templateUrl: './info.component.html',
    styleUrls: ['./info.component.scss']
  })
  export class InfoComponent implements OnInit {
    public buscar: string;
    users: any;
    private readonly url = 'http://localhost:3000/users';
    select: any;
    usuario = [
      {
        user: ''
      }
    ];
  
    constructor(private http: HttpClient) { }
  
    ngOnInit() {
      this.users = this.http.get(this.url);
    }
  
    getDados(event) {
      if (event.keyCode === 13) {
        const params = new HttpParams().set('user', this.buscar);
        this.select = this.http.get(this.url, { params });
      }
  
      this.usuario.push({
        user: this.select
      });
    }
  }
  </code></pre>
  
  <p>My component.html:</p>
  
  <pre><code>&lt;igx-input-group type="search" class="search"&gt;
    &lt;igx-prefix&gt;
      &lt;igx-icon&gt;search&lt;/igx-icon&gt;
    &lt;/igx-prefix&gt;
    &lt;input #search igxInput placeholder="Buscar" (keydown)="getDados($event)" [(ngModel)]="buscar"&gt;
    &lt;igx-suffix *ngIf="search.value.length &gt; 0" (click)="searchContact = null"&gt;
      &lt;igx-icon&gt;clear&lt;/igx-icon&gt;
    &lt;/igx-suffix&gt;
  &lt;/igx-input-group&gt;
  
  &lt;div class="list-sample"&gt;
    &lt;igx-list&gt;
      &lt;igx-list-item isHeader="true"&gt;Users&lt;/igx-list-item&gt;
      &lt;igx-list-item #item *ngFor="let users of users | async"&gt;
        &lt;div class="item-container"&gt;
          &lt;div class="contact"&gt;
            &lt;div  class="contact__info"&gt;
              &lt;span class="id"&gt;{{users.id}} &lt;/span&gt;
              &lt;span class="user"&gt;{{users.user}}&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/igx-list-item&gt;
    &lt;/igx-list&gt;
  &lt;/div&gt;
  &lt;p *ngFor="let usuario of usuario"&gt;{{ usuario.user | json }}&lt;/p&gt;
  </code></pre>
  
  <p>I'd appreciate any kind soul willing to help.</p>