angular - Introducere etichete folosind Angular2/Ionic2

Caut un input de etichete folosind Angular2 în Ionic2. Similar cu Bootstrap Tags Input

Caut un exemplu folosind doar Angular2, în Ionic 2.

Răspuns #1

Cred că nu poți face asta cu elementul ion-input din Ionic2, dar poți construi acea funcție cu doar câteva reguli de stil și câteva linii de cod.

Acolo, folosesc doar un șir de șiruri pentru a arăta etichetele

  <div class="tag-container">
    <span class="tag" *ngFor="let tag of tags">
      {{ tag }}
      <ion-icon name="close" (click)="deleteTag(tag)"></ion-icon>
    </span>
  </div>

Și câteva stiluri pentru a le arăta corect:

.tag-container {
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  padding: 10px;
  margin: 10px;
}

.tag {
  display: inline-block;
  background-color: #5bc0de;
  color: #fff;
  margin: 5px 5px;
  padding: 2px 5px;
}

Notă: Nu am creat o directivă personalizată în acea demonstrație pentru a o păstra simplă și ușor de înțeles, dar țineți minte că dacă veți folosi aceste etichete pe mai multe pagini (sau poate doriți să adăugați mai multe funcționalități acestora), o implementare mai bună ar fi să extrageți șablonul, stilurile și comportamentul într-un component separat și să îl folosiți ca o directivă în componenta părinte.