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:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChipModule } from 'illyria-ui-chip';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ChipModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

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

<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.

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

@Component({
  selector: 'app-example',
  template: `
    <ui-chip [disabled]="isDisabled">{{ chipText }}</ui-chip>
  `,
})
export class ExampleComponent {
  chipText: string = 'Example Chip';
  isDisabled: boolean = false;
}

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

Remember 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.