web-dev-qa-db-ja.com

Angularのタグ入力コンポーネントはありますか？

Angularの特定のコンポーネントを探しています。これは、同様の方法で機能するものです ブートストラップタグ入力

すぐに使えるコンポーネントを見つけたり、実装の例を提供したりするのを手伝ってくれる人はいますか？ Angular 4のために必要です

angularbootstrap-tags-input
5
Samir Ghoneim

何度も何度も検索した後、最終的にこのコンポーネントを見つけました。これは、いくつかのクールな機能 ngx-chips を備えたangularマテリアルで使用されているMatChipsModuleのように見えます。

4
Samir Ghoneim

TL; DRAngularでは、そのタイプのコンポーネントはchipと呼ばれます。キーワードを変更すると、より良い結果が得られます。

それに到達する方法はたくさんありますが、最も一般的なのはAngular Materialを使用することです。

まず、 公式チュートリアル に従ってプロジェクトにAngular Materialをインストールします。幸いにもそれはよく書かれていて、問題が発生することはないと思います。 。

次に、次のようにして、タグを表示するコンポーネントにMatChipsModuleをインポートします。

import {MatChipsModule} from '@angular/material';

最後に、テンプレートでコンポーネントを使用できます。

<mat-chip-list>
  <mat-chip *ngFor="let i of items" [selectable]="selectable"
           [removable]="removable" (remove)="remove(i)">
    {{i.tagName}}
    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
  </mat-chip>
</mat-chip-list>

出典： https://material.angular.io/components/chips/overview

7
Cristian Traìna