title: Angular 5 : how can i use click event in item list?
body: <p>I'm a student starting to train on Angular 5. I guess my issue could be the same even on Angular 2.</p>
  
  <p>For a project, i'm currently trying to create a simple search input where the user can write a name of a city, and the field will suggest some names below. Then when the user click on a item of the list, it will be displayed in the input. Actually it should act pretty much like the google search bar.</p>
  
  <p>Here is the <a href="https://plnkr.co/edit/WHyJh2iN0wgIFFIlwRMe?p=info" rel="nofollow noreferrer">plunk</a>. I guess it won't run in plunk because i just put the right files to understand and not my whole app.</p>
  
  <p>Here are my files :
  input-form.component.html :</p>
  
  <pre><code>&lt;input
       type="text"
       class="form-control"
       id="InputCity"
       [(ngModel)]="searchText"
       formControlName="city"
       (click)="displayCities()"&gt;
          &lt;ul class="results"&gt;
              &lt;li&gt;
                 &lt;a 
                   class="list-group-item"
                   style="cursor: pointer"
                   *ngFor="let city of citiesListInput | filter : searchText"
                   (click)="putIntoField(city)"&gt;
                     {{ city }}
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>input-form.component.ts (in short):</p>
  
  <pre><code>export class InputFormComponent implements OnInit {
    citiesListInput: string[];
  
    constructor(private citiesSvc: CitiesService) { }
  
    //Get list of cities from a service//
    displayCities() {
      this.citiesListInput = this.citiesSvc.citiesList;
    }
  
    //Should send the city clicked in the list in the input field.// 
    //For now i just console log it//
    putIntoField(city: string) {
      console.log(city);
    }
  }
  </code></pre>
  
  <p><strong>First issue</strong> : The second click event (putintoField) does not seems to work in a list of items. It just does nothing. But if i remove ul and li tags it works. Am i missing something ? If there a way to do it with ul and li tags ?</p>
  
  <p><strong>Second issue</strong> :  What should i do to put the selected city in the input field ?
  I'm just missing how to select the value of my input and replace it.</p>
  
  <p>It seems rather simple but i cannot find the right answer on the internets.</p>
  
  <p>Thanks everyone for your answers !</p>
  
  <p>And this is my filter file which is declare in app module : </p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  
    @Pipe({
      name: 'filter'
    })
  
  export class FilterPipe implements PipeTransform {
    transform(items: any[], searchText: string): any[] {
      if(!items) return [];
      if(!searchText) return items;
  
      searchText = searchText.toUpperCase();
  
      return items.filter( it =&gt; {
        return it.toUpperCase().includes(searchText);
      });
    }
  }
  </code></pre>