chips-demo.html

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

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

      <mat-chip-set>
        <mat-chip>Chip 1</mat-chip>
        <mat-chip>Chip 2</mat-chip>
        <mat-chip disabled>Chip 3</mat-chip>
      </mat-chip-set>

      <h4>Unstyled</h4>

      <mat-chip-set>
        <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-set>

      <mat-chip-listbox>
        <mat-basic-chip-option>Basic Chip Option 1</mat-basic-chip-option>
        <mat-basic-chip-option>Basic Chip Option 2</mat-basic-chip-option>
        <mat-basic-chip-option>Basic Chip Option 3</mat-basic-chip-option>
      </mat-chip-listbox>

      <mat-chip-grid #basicGrid>
        <mat-basic-chip-row>Basic Chip Row 1</mat-basic-chip-row>
        <mat-basic-chip-row>Basic Chip Row 2</mat-basic-chip-row>
        <mat-basic-chip-row>Basic Chip Row 3</mat-basic-chip-row>
        <input [matChipInputFor]="basicGrid" readonly>
      </mat-chip-grid>

      <h4>With avatar, icons, and color</h4>

      <mat-chip-set>
        <mat-chip disabled>
          <mat-icon matChipAvatar>home</mat-icon>
          Home
          <button matChipRemove aria-label="Remove chip">
            <mat-icon>close</mat-icon>
          </button>
        </mat-chip>

        <mat-chip highlighted="true" color="accent">
          <mat-chip-avatar>P</mat-chip-avatar>
          Portel
          <button matChipRemove aria-label="Remove chip">
            <mat-icon>close</mat-icon>
          </button>
        </mat-chip>

        <mat-chip>
          <mat-chip-avatar>M</mat-chip-avatar>
          Molly
        </mat-chip>

        <mat-chip>
          Koby
          <button matChipRemove aria-label="Remove chip">
            <mat-icon>close</mat-icon>
          </button>
        </mat-chip>

        <mat-chip>
          Razzle
        </mat-chip>

        <mat-chip>
          <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" matChipAvatar>
          Mal
        </mat-chip>

        <mat-chip highlighted="true" color="warn">
          <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" matChipAvatar>
          Husi
          <button matChipRemove>
            <mat-icon>close</mat-icon>
          </button>
        </mat-chip>

        <mat-chip>
          Good
          <mat-icon matChipTrailingIcon>star</mat-icon>
        </mat-chip>

        <mat-chip>
          Bad
          <mat-icon matChipTrailingIcon>star_border</mat-icon>
        </mat-chip>

      </mat-chip-set>

      <h4>With Events</h4>

      <mat-chip-set>
        @if (visible) {
          <mat-chip highlighted="true" color="warn"
                  (destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
            With Events
            <button matChipRemove aria-label="Remove chip">
              <mat-icon>close</mat-icon>
            </button>
          </mat-chip>
        }
      </mat-chip-set>
      <div>{{message}}</div>

    </mat-card-content>
  </mat-card>

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

    <mat-card-content>
      <button mat-button (click)="disabledListboxes = !disabledListboxes">
       {{disabledListboxes ? "Enable" : "Disable"}}
      </button>
      <button mat-button (click)="listboxesWithAvatar = !listboxesWithAvatar">
       {{listboxesWithAvatar ? "Hide Avatar" : "Show Avatar"}}
      </button>

      <h4>Single selection</h4>

      <mat-chip-listbox multiple="false" [disabled]="disabledListboxes">
        @for (shirtSize of shirtSizes; track shirtSize) {
            <mat-chip-option [disabled]="shirtSize.disabled">
              {{shirtSize.label}}
              @if (listboxesWithAvatar) {
                <mat-chip-avatar>{{shirtSize.avatar}}</mat-chip-avatar>
              }
            </mat-chip-option>
          }
      </mat-chip-listbox>

      <h4>Multi selection</h4>

      <mat-chip-listbox multiple="true" [disabled]="disabledListboxes">
        @for (hint of restaurantHints; track hint) {
          <mat-chip-option [selected]="hint.selected">
            @if (listboxesWithAvatar) {
              <mat-chip-avatar>{{hint.avatar}}</mat-chip-avatar>
            }
            {{hint.label}}
          </mat-chip-option>
        }
      </mat-chip-listbox>

    </mat-card-content>
  </mat-card>

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

    <mat-card-content>
      <p>
        The <code>&lt;mat-chip-grid&gt;</code> component pairs with the <code>matChipInputFor</code> directive
        to convert user input text into chips.
        They can be used inside a <code>&lt;mat-form-field&gt;</code>.
      </p>

      <button mat-button (click)="disableInputs = !disableInputs">
       {{disableInputs ? "Enable" : "Disable"}}
      </button>

      <button mat-button (click)="editable = !editable">
        {{editable ? "Disable editing" : "Enable editing"}}
      </button>

      <h4>Input is last child of chip grid</h4>

      <mat-form-field class="demo-has-chip-list">
        <mat-label>New Contributor...</mat-label>
        <mat-chip-grid #chipGrid1 [(ngModel)]="selectedPeople" required [disabled]="disableInputs">
          @for (person of people; track person) {
            <mat-chip-row
              [editable]="editable"
              (removed)="remove(person)"
              (edited)="edit(person, $event)">
              {{person.name}}
              <button matChipRemove aria-label="Remove contributor">
                <mat-icon>close</mat-icon>
              </button>
            </mat-chip-row>
          }
          <input [disabled]="disableInputs"
                 [matChipInputFor]="chipGrid1"
                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                 [matChipInputAddOnBlur]="addOnBlur"
                 (matChipInputTokenEnd)="add($event)" />
        </mat-chip-grid>
      </mat-form-field>

      <h4>Input is next sibling child of chip grid</h4>

      <mat-form-field>
        <mat-label>New Contributor...</mat-label>
        <mat-chip-grid #chipGrid2 [(ngModel)]="selectedPeople" required [disabled]="disableInputs">
          @for (person of people; track person) {
            <mat-chip-row (removed)="remove(person)">
              {{person.name}}
              <button matChipRemove aria-label="Remove contributor">
                <mat-icon>close</mat-icon>
              </button>
            </mat-chip-row>
          }
        </mat-chip-grid>
        <input [matChipInputFor]="chipGrid2"
               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
               [matChipInputAddOnBlur]="addOnBlur"
               (matChipInputTokenEnd)="add($event)" />
      </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>SEMICOLON</code> keys.
      </p>

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

    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-toolbar color="primary">Miscellaneous</mat-toolbar>
    <mat-card-content>
      <h4>Stacked</h4>

      <p>
        You can also stack the chips if you want them on top of each other.
      </p>

      <mat-chip-set class="mat-mdc-chip-set-stacked">
        @for (aColor of availableColors; track aColor) {
          <mat-chip highlighted="true" [color]="aColor.color">{{aColor.name}}</mat-chip>
        }
      </mat-chip-set>

      <h4>NgModel with multi selection</h4>

      <mat-chip-listbox [multiple]="true" [(ngModel)]="selectedColors">
        @for (aColor of availableColors; track aColor) {
          <mat-chip-option [color]="aColor.color" [value]="aColor.name">{{aColor.name}}</mat-chip-option>
        }
      </mat-chip-listbox>

      The selected colors are
      @for (color of selectedColors; track color; let isLast = $last) {
        <span>{{color}}{{isLast ? '' : ', '}}</span>
      }

      <h4>NgModel with single selection</h4>

      <mat-chip-listbox [(ngModel)]="selectedColor">
        @for (aColor of availableColors; track aColor) {
          <mat-chip-option [color]="aColor.color" [value]="aColor.name">{{aColor.name}}</mat-chip-option>
        }
      </mat-chip-listbox>

      The selected color is {{selectedColor}}.

      <h4>Single selection without checkmark selection indicator.</h4>

      <mat-chip-listbox [(ngModel)]="selectedColor" [hideSingleSelectionIndicator]="true">
        @for (aColor of availableColors; track aColor) {
          <mat-chip-option [color]="aColor.color" [value]="aColor.name">{{aColor.name}}</mat-chip-option>
        }
      </mat-chip-listbox>

      <h4>Single selection with decorative icons.</h4>

      <mat-chip-listbox [(ngModel)]="selectedColor" [hideSingleSelectionIndicator]="true">
        @for (aColor of availableColors; track aColor) {
          <mat-chip-option [color]="aColor.color"
                  [value]="aColor.name">
            <mat-icon matChipAvatar>home</mat-icon>
            {{aColor.name}}
            <mat-icon matChipTrailingIcon>star</mat-icon>
          </mat-chip-option>
        }
      </mat-chip-listbox>

      The selected color is {{selectedColor}}.

      <h4>Single selection with stacked appearance.</h4>

      <mat-chip-listbox [(ngModel)]="selectedColor" class="mat-mdc-chip-set-stacked">
        @for (aColor of availableColors; track aColor) {
          <mat-chip-option [color]="aColor.color"
                  [value]="aColor.name">
            {{aColor.name}}
            <mat-icon matChipTrailingIcon>star</mat-icon>
          </mat-chip-option>
        }
      </mat-chip-listbox>

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