ipsos-components/src/demo-app/chips/chips-demo.html

Material Design components for Angular

<div class="chips-demo">
  <mat-card>
    <mat-toolbar color="primary">Static Chips</mat-toolbar>

    <mat-card-content>
      <h4>Simple</h4>

      <mat-chip-list>
        <mat-chip>Chip 1</mat-chip>
        <mat-chip>Chip 2</mat-chip>
        <mat-chip>Chip 3</mat-chip>
      </mat-chip-list>

      <h4>Unstyled</h4>

      <mat-chip-list>
        <mat-basic-chip>Basic Chip 1</mat-basic-chip>
        <mat-basic-chip>Basic Chip 2</mat-basic-chip>
        <mat-basic-chip>Basic Chip 3</mat-basic-chip>
      </mat-chip-list>

      <h4>Advanced</h4>

      <mat-chip-list selectable="false">
        <mat-chip color="accent" selected="true">Selected/Colored</mat-chip>

        <mat-chip color="warn" selected="true" *ngIf="visible"
                 (destroy)="displayMessage('chip destroyed')" (remove)="toggleVisible()">
          With Events
          <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip>
      </mat-chip-list>
      <div>{{message}}</div>
    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-toolbar color="primary">Dynamic Chips</mat-toolbar>

    <mat-card-content>
      <h4>Form Field</h4>

      <p>
        You can easily put the the <code>&lt;mat-chip-list&gt;</code> inside of an
        <code>&lt;mat-form-field&gt;</code>.
      </p>

      <button mat-button (click)="tabIndex = (tabIndex === 0 ? -1 : 0)">
        Set tabIndex to {{tabIndex === 0 ? -1 : 0}}
      </button>
      <mat-form-field class="has-chip-list">
        <mat-chip-list [tabIndex]="tabIndex" #chipList1 [(ngModel)]="selectedPeople" required>
          <mat-chip  *ngFor="let person of people" [color]="color" [selectable]="selectable"
                   [removable]="removable" (remove)="remove(person)">
            {{person.name}}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
          </mat-chip>
          <input placeholder="New Contributor..."
                 [matChipInputFor]="chipList1"
                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                 [matChipInputAddOnBlur]="addOnBlur"
                 (matChipInputTokenEnd)="add($event)" />
        </mat-chip-list>
      </mat-form-field>



      <p>
        You can also put <code>&lt;mat-form-field&gt;</code> outside of an <code>mat-chip-list</code>.
        With <code>matChipInput</code> the input work with chip-list
      </p>

      <mat-form-field>
        <mat-chip-list [tabIndex]="tabIndex"  #chipList2 [(ngModel)]="selectedPeople" required>
          <mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
                   [removable]="removable" (remove)="remove(person)">
            {{person.name}}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
          </mat-chip>
        </mat-chip-list>
        <input placeholder="New Contributor..."
               [matChipInputFor]="chipList2"
               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
               [matChipInputAddOnBlur]="addOnBlur"
               (matChipInputTokenEnd)="add($event)" />
      </mat-form-field>

      <p>
        Chips list without input
      </p>


      <mat-form-field class="has-chip-list">
        <mat-chip-list #chipList3>
          <mat-chip *ngFor="let person of people" [color]="color" [selectable]="selectable"
                   [removable]="removable" (remove)="remove(person)">
            {{person.name}}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
          </mat-chip>
        </mat-chip-list>
      </mat-form-field>


      <p>
        The example above has overridden the <code>[separatorKeys]</code> input to allow for
        <code>ENTER</code>, <code>COMMA</code> and <code>SEMI COLON</code> keys.
      </p>

      <h4>Options</h4>
      <p>
        <mat-checkbox name="selectable" [(ngModel)]="selectable">Selectable</mat-checkbox>
        <mat-checkbox name="removable" [(ngModel)]="removable">Removable</mat-checkbox>
        <mat-checkbox name="addOnBlur" [(ngModel)]="addOnBlur">Add on Blur</mat-checkbox>
      </p>

      <h4>Stacked Chips</h4>

      <p>
        You can also stack the chips if you want them on top of each other and/or use the
        <code>(focus)</code> event to run custom code.
      </p>

      <mat-chip-list class="mat-chip-list-stacked" aria-orientation="vertical" [tabIndex]="-1">
        <mat-chip *ngFor="let aColor of availableColors"
                 (focus)="color = aColor.color" color="{{aColor.color}}" selected="true">
          {{aColor.name}}
        </mat-chip>
      </mat-chip-list>

      <h4>NgModel with chip list</h4>
      <mat-chip-list [multiple]="true" [(ngModel)]="selectedColors">
        <mat-chip *ngFor="let aColor of availableColors" color="{{aColor.color}}"
                 [value]="aColor.name" (remove)="removeColor(aColor)">
          {{aColor.name}}
          <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip>
      </mat-chip-list>

      The selected colors are <span *ngFor="let color of selectedColors"> {{color}}</span>.

      <h4>NgModel with single selection chip list</h4>
      <mat-chip-list [(ngModel)]="selectedColor">
        <mat-chip *ngFor="let aColor of availableColors" color="{{aColor.color}}"
                 [value]="aColor.name" (remove)="removeColor(aColor)">
          {{aColor.name}}
          <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip>
      </mat-chip-list>

      The selected color is {{selectedColor}}.
    </mat-card-content>
  </mat-card>
</div>