How to append the selected item in same tag in angular2

Question

I am trying to select an item and append the same item in the same tag like what we do while selecting tags in ask question in stackoverflow

My template,

      <div class="form-group" *ngFor="let i of show">
<label for="exampleInputEmail1">Tags</label>
<input type="text" class="form-control" [formControl]="form.controls['tags']"  (keyup)="tags(key.value)" {{i}}#key id="exampleInputEmail1" aria-describedby="emailHelp">

        </div>  
                                <div  class="col-sm-12 nopadding ">

                                <ul class="searchlist" >
                                    <li *ngFor="let detail of tag">

                                        <a (click) = "catch(detail.type)">{{detail.type}}</a>
                                    </li>
                                </ul>   

                            </div>

On selecting one i push the selected to array and bind it to my html

My ts,

catch(val){
   this.tag =  [];
   this.show.push(val);console.log("val"+this.show)

}

Can someone please suggest me help...........

Answer 1

An <input> tag can't have any children.

Stackoverflow uses a borderless input inside a bordered container. The input uses any space that's not needed to display selected tags. SO utilizes JavaScript to resize the input. But depending on which browsers you need to support, this can be easily accomplished using CSS's flex. For IE<11 you'll need a polyfill though

.container {
  border: 1px solid black;
  display: flex;
}
.tag {
  border: 1px solid red;
}
.tag-input {
  flex: 1;
}

<div class="container">
  <span class="tag">asdasdasd</span> <!-- you'd use *ngFor here -->
  <span class="tag">dsadasd</span>
  <span class="tag">asdasdasd</span>
  <span class="tag">asdasdasd</span>
  <input class="tag-input" type=text>
</div>