Restrict user to add only one chip in md-contact chip (Angular Material)

To restrict users from adding more than one chip in an md-contact chip (Angular Material), you can disable the input field or the chip addition button once a chip is added. This way, users won't be able to add additional chips until they remove the existing one. Here's how you can achieve this:

1. In your component, create a boolean variable to track whether a chip has been added or not. Let's call it isChipAdded.

typescriptCopy code
import { Component } from '@angular/core';

@Component({
  selector: 'app-chip-component',
  templateUrl: './chip-component.component.html',
  styleUrls: ['./chip-component.component.css']
})
export class ChipComponent {
  isChipAdded = false;

  addChip() {
    // Your logic to add the chip here
    this.isChipAdded = true;
  }
}

2. In the template, conditionally disable the input field or the chip addition button based on the value of isChipAdded.

htmlCopy code
<md-contact-chips>
  <md-input-container>
    <input mdInput placeholder="Add a chip" [disabled]="isChipAdded">
  </md-input-container>
  <md-chip-list>
    <md-chip *ngIf="isChipAdded">
      <!-- Display the added chip details here -->
    </md-chip>
  </md-chip-list>
  <button md-button color="primary" (click)="addChip()" [disabled]="isChipAdded">Add Chip</button>
</md-contact-chips>

3. Implement the addChip() method in your component to handle adding the chip and set isChipAdded to true.

With this implementation, the input field and the "Add Chip" button will be disabled after a chip is added. Users won't be able to add another chip until they remove the existing one. You can further enhance this by adding a "Remove Chip" button next to the displayed chip to allow users to remove it and enable the input field and "Add Chip" button again.