CODEWITHSUNDEEP
angulartypescriptionic2ionic3
Ankit Maheshwari
Ankit Maheshwari

Reputation: 1680

Tags Input using Angular2 / Ionic2

I'm looking for Tags Input using Angular2 in Ionic2. Similar to Bootstrap Tags Input

I am seeking an example using Angular2 only, in Ionic 2.

Upvotes: 2

Views: 1134

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

I think you can't do that with the ion-input element from Ionic2 , but you can build that feature with just a few style rules and a few lines of code.

There, I'm just using an array of strings to show the tags

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

And some styles to show them properly:

.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;
}

Note: I didn't create a custom directive in that demo to keep it simple and easy to understand, but keep in mind that if you're going to use those tags in several pages (or maybe you want to add more features to them) a better implementation would be to extract the template, the styles and the behaviour into a separated component and using it like a directive in the parent component.

Upvotes: 1

Related Questions