angular:角度材料芯片教程 | 矩阵芯片列表示例

角度材料芯片是用来在单一元素中显示一组标签，作为博客文章的芯片。

这些可以在以下情况下使用 输入芯片用于表示输入信息的类型 过滤芯片用于过滤数据组，例如，一个类别或博客文章内容的标签。

基本的Chip UI组件包含以下内容

• 芯片容器 - 它是一个必要的父容器，用于容纳一组元素或芯片。
• 图片 - 它是一个可选的芯片缩略图，用于显示芯片的类型。
• string - 芯片的名称，例子是标签。
• delete icon - 可选的关闭图标，用于关闭芯片。

在这篇博文中，列出了使用角质材料的各种例子。

这篇文章不包括如何创建一个angular应用程序，它包括在angular应用程序中添加芯片代码。

Angular material 芯片

芯片是一个UI元素，以芯片的形式显示单个元素中的对象列表。matChip 是一个选择器，用于在UI页面中显示芯片的材料风格。

芯片相关的组件以'MatChipsModule'的形式内置在angular模块中。

导入angular材料芯片模块

你需要做的就是在你的应用程序中导入MatChipsModule 模块。你可以在你的组件、app.module.ts或共享公共模块中添加导入。我在app.module.ts文件中加入了这个模块。

app.module.ts

import { NgModule } from '@angular/core';
import { MatChipsModule } from '@angular/material/chips';
@NgModule({
imports:      [ MatChipsModule],
declarations: [ AppComponent],
bootstrap:    [ AppComponent ],
providers:[],
exports:[]
})
export class AppModule { }

现在，应用程序可以访问以下组件和你的组件中可用的MatChipsModule 指令:

• mat-chip-list,matChipRemove选择器等...
• mat-chip-list和mat-chip组件
• matChipList指令

下一步是什么？我们来看看如何使用材料芯片的一些例子。

材料芯片的基本例子

我们将使用mat-chip-list 组件在angular中创建一个基本的芯片列表元素。

<p>
  basic-chip works!
</p>
<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList>
    <mat-chip *ngFor="let country of countries" [selectable]="selectable" [removable]="removable"
      (removed)="remove(country)">
      {{country.name}}
      <mat-icon matChipRemove *ngIf="removable">Ab</mat-icon>
    </mat-chip>
    <input placeholder="New Country..."
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
</mat-form-field>

这里是angular组件的材料芯片组件

import { COMMA, ENTER } from "@angular/cdk/keycodes";
import { Component, OnInit } from "@angular/core";
import { MatChipInputEvent } from "@angular/material";

export interface Country {
  name: string;
}
@Component({
  selector: "app-basic-chip",
  templateUrl: "./basic-chip.component.html",
  styleUrls: ["./basic-chip.component.css"]
})
export class BasicChipComponent {
  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
  countries: Country[] = [
    { name: "India" },
    { name: "USA" },
    { name: "Apple" }
  ];

  add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;

    if ((value || "").trim()) {
      this.countries.push({ name: value.trim() });
    }

    // Reset the input value
    if (input) {
      input.value = "";
    }
  }

  remove(country: Country): void {
    const index = this.countries.indexOf(country);

    if (index >= 0) {
      this.countries.splice(index, 1);
    }
  }
}