Chips

The ui-chip component represents a small interactive element that can be used for various purposes, such as displaying tags, categories, or user information. It can be used individually or within a ui-chip-set to create a group of chips.

Table of Contents

• Installation
• Usage

Installation

To use the ui-chip component in your Angular application, you need to follow these steps:

npm install illyria-ui-chip

Usage

To use the ui-chip component in your Angular application, first, make sure you have imported the required module and component. For example, in your app module:

1import { NgModule } from '@angular/core';
2import { BrowserModule } from '@angular/platform-browser';
3import { AppComponent } from './app.component';
4import { ChipModule } from 'illyria-ui-chip';
5
6@NgModule({
7  declarations: [AppComponent],
8  imports: [BrowserModule, ChipModule],
9  providers: [],
10  bootstrap: [AppComponent],
11})
12export class AppModule {}

Now you can use the ui-chip component in your templates as shown in the section below:

1<ui-chip>{{ chipText }}</ui-chip>

The component accepts an optional input property:

• disabled: Allows you to set the chip to a disabled state. When set to true, the chip will have a disabled appearance and won't be interactive.

In your component class, you can set the chipText and isDisabled properties to control the chip's content and disabled state.

1import { Component } from '@angular/core';
2
3@Component({
4  selector: 'app-example',
5  template: `
6    <ui-chip [disabled]="isDisabled">{{ chipText }}</ui-chip>
7  `,
8})
9export class ExampleComponent {
10  chipText: string = 'Example Chip';
11  isDisabled: boolean = false;
12}

Feel free to add more customizations and styles to the ui-chip component to suit your project's needs. Happy coding!

1
2Remember that this is just a template for the documentation. Make sure to provide proper examples, API documentation, and additional details based on the actual implementation and features of your `ui-chip` component library.