feat(chip): add chip variants sample

live-editing/configs/ChipConfigGenerator.ts

@@ -15,6 +15,12 @@ export class ChipConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/data-display/"
         }));
 
+        configs.push(new Config({
+            component: 'ChipVariantsComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-display/"
+        }));
+
         configs.push(new Config({
             component: 'ChipAreaSampleComponent',
             appConfig: BaseAppConfig,

src/app/data-display/chip/chip-variants/chip-variants.component.html

@@ -0,0 +1,12 @@
+<div class="sample-container">
+  @for (item of variants; track item.label) {
+    <igx-chip
+      [id]="item.label"
+      [variant]="item.variant"
+      [selectable]="true"
+      [removable]="true"
+      (remove)="chipRemoved($event)">
+      {{ item.label }}
+    </igx-chip>
+  }
+</div>

src/app/data-display/chip/chip-variants/chip-variants.component.scss

@@ -0,0 +1,8 @@
+igx-chip {
+    margin-right: 5px;
+}
+
+.sample-container {
+    padding-top: 15px;
+    padding-left: 10px;
+}

src/app/data-display/chip/chip-variants/chip-variants.component.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectorRef, Component, inject } from '@angular/core';
+import { IBaseChipEventArgs, IgxChipComponent, IgxChipTypeVariant } from 'igniteui-angular/chips';
+
+@Component({
+    selector: 'app-chip-variants',
+    styleUrls: ['./chip-variants.component.scss'],
+    templateUrl: './chip-variants.component.html',
+    imports: [IgxChipComponent]
+})
+export class ChipVariantsComponent {
+    private cdr = inject(ChangeDetectorRef);
+
+    public variants: { variant: IgxChipTypeVariant | undefined; label: string }[] = [
+        { variant: undefined, label: 'Default' },
+        { variant: IgxChipTypeVariant.PRIMARY, label: 'Primary' },
+        { variant: IgxChipTypeVariant.INFO, label: 'Info' },
+        { variant: IgxChipTypeVariant.SUCCESS, label: 'Success' },
+        { variant: IgxChipTypeVariant.WARNING, label: 'Warning' },
+        { variant: IgxChipTypeVariant.DANGER, label: 'Danger' }
+    ];
+
+    public chipRemoved(event: IBaseChipEventArgs) {
+        this.variants = this.variants.filter(v => v.label !== event.owner.id);
+        this.cdr.detectChanges();
+    }
+}

src/app/data-display/data-display-routes-data.ts

@@ -8,6 +8,7 @@ export const dataDisplayRoutesData = {
     "badge-styling-sample": { displayName: "Badge Styling Sample", parentName: "Badge" },
     "badge-tailwind-styling-sample": { displayName: "Badge Tailwind Styling Sample", parentName: "Badge" },
     "chip-simple": { displayName: "Chip Simple", parentName: "Chip" },
+    "chip-variants": { displayName: "Chip Variants", parentName: "Chip" },
     "chip-area-sample": { displayName: "Chip Area Sample", parentName: "Chip" },
     "chip-styling": { displayName: "Chip Styling", parentName: "Chip" },
     "chip-tailwind-styling": { displayName: "Chip Tailwind Styling", parentName: "Chip" },

src/app/data-display/data-display.routes.ts

@@ -6,6 +6,7 @@ import { BadgeStylingSampleComponent } from './badge/badge-styling-sample/badge-
 import { BadgeTailwindStylingSampleComponent } from './badge/badge-tailwind-styling-sample/badge-tailwind-styling-sample.component';
 import { ChipAreaSampleComponent } from './chip/chip-area-sample/chip-area-sample.component';
 import { ChipSimpleComponent } from './chip/chip-simple/chip-simple.component';
+import { ChipVariantsComponent } from './chip/chip-variants/chip-variants.component';
 import { ChipStylingSampleComponent } from './chip/chip-styling/chip-styling.component';
 import { ChipTailwindStylingSampleComponent } from './chip/chip-tailwind-styling/chip-tailwind-styling.component';
 import { CircularDynamicSampleComponent } from './circular-progressbar/circular-dynamic-sample/circular-dynamic-sample.component';
@@ -87,6 +88,11 @@ export const DataDisplayRoutes: Routes = [
         data: dataDisplayRoutesData['chip-simple'],
         path: 'chip-simple'
     },
+    {
+        component: ChipVariantsComponent,
+        data: dataDisplayRoutesData['chip-variants'],
+        path: 'chip-variants'
+    },
     {
         component: CircularDynamicSampleComponent,
         data: dataDisplayRoutesData['circular-dynamic-sample'],