how to add custom md-chips in addition to existing md-chips?

ONLINECAST

2 min read

·

07-10-2024

6

0

Share

Adding Custom MD-Chips Alongside Existing Ones: A Comprehensive Guide

Problem: You're working with Angular Material's md-chips component and want to add your own custom chips alongside the existing ones. Maybe you need a special icon, different styling, or specific functionality not offered by default.

Solution: This guide provides a step-by-step approach to seamlessly integrate your custom MD-Chips within an existing Angular Material setup, enhancing your application's user experience and visual appeal.

Scenario and Original Code

Let's assume you have a basic Angular Material md-chips component with a pre-defined list of items:

<md-chips>
  <md-chip ng-repeat="item in items" ng-model="item">
    {{item.name}}
  </md-chip>
</md-chips>

Adding Custom MD-Chips

To add your custom chips, you'll need to create a separate component that extends the md-chip component and implements your desired customizations. Here's a breakdown:

1. Create the Custom Chip Component:

Generate a new component in your Angular project (e.g., custom-chip.component.ts):

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-custom-chip',
  templateUrl: './custom-chip.component.html',
  styleUrls: ['./custom-chip.component.scss']
})
export class CustomChipComponent implements OnInit {
  @Input() customData: any;

  constructor() { }

  ngOnInit() {
  }
}

2. Define the Custom Chip Template:

In custom-chip.component.html, create the custom chip's structure. This is where you customize styling and functionality:

<md-chip class="custom-chip">
  <i class="material-icons">{{customData.icon}}</i>
  {{customData.name}}
  <span class="custom-chip-info">{{customData.extraInfo}}</span>
</md-chip>

3. Integrate with the Existing MD-Chips:

Now, modify your original md-chips component to include the custom chips. You'll use a directive to conditionally render the appropriate chip based on the data:

<md-chips>
  <md-chip *ngFor="let item of items; let i = index"
           [ngModel]="item" 
           (ngModelChange)="updateItem(i, $event)">
    {{item.name}}
  </md-chip>

  <app-custom-chip *ngFor="let customItem of customItems"
                   [customData]="customItem"></app-custom-chip>
</md-chips>

Explanation:

• *ngFor: This directive iterates through your custom items and renders the app-custom-chip component for each one.
• [customData]: This binds the custom item's data to the customData input property of your CustomChipComponent.

4. Styling and Functionality:

Styling: Use CSS (in custom-chip.component.scss) to customize the look and feel of your custom chips. For example:

.custom-chip {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  color: #333;
}

Functionality:

• Add event listeners and logic within your CustomChipComponent to handle interactions like clicking or deleting your custom chips.

Important Considerations:

• Accessibility: Ensure your custom chips follow accessibility guidelines, especially for screen readers and keyboard navigation.
• Maintainability: Keep your custom chip component modular and reusable for easy maintenance and future updates.

Example:

<md-chips>
  <md-chip *ngFor="let item of items; let i = index" 
           [ngModel]="item"
           (ngModelChange)="updateItem(i, $event)">
    {{item.name}}
  </md-chip>

  <app-custom-chip *ngFor="let customItem of customItems"
                   [customData]="customItem"></app-custom-chip>
</md-chips>

// In your component.ts file
items = [
  { name: 'Apple' },
  { name: 'Banana' }
];

customItems = [
  { name: 'Special Item', icon: 'star', extraInfo: 'Premium' }
];

Conclusion:

By creating a custom component and integrating it into your existing md-chips, you can significantly enhance the look, feel, and functionality of your Angular Material application. This approach gives you fine-grained control over the user interface and allows you to implement your specific requirements.