Add 14 grid-lite samples from igniteui-wc-examples

[Copilot]

Ports 14 grid-lite samples from igniteui-wc-examples (branch: dmdimitrov/grid-lite-samples, commit: 145d203c) to demonstrate igc-grid-lite custom element usage in Angular.

Changes

Package Dependencies

• Added igc-grid-lite@1.0.0-alpha.5

New Components (14 samples)

Created in src/app/grid/grid-lite/:

• Column Configuration: simple, dynamic, headers - Basic to advanced column config with formatters and runtime updates
• Data Binding: dynamic - Runtime data source switching
• Filtering: simple, events, pipeline - Basic filtering, event handling, remote simulation
• Sorting: simple, events, grid-config, pipeline - Sorting with custom comparers, events, configuration, remote simulation
• Styling: custom, themes - Custom theming and built-in theme selection
• Overview: Complete feature demonstration

Shared Service

• GridLiteDataService - Generates mock data (Users, Products) without external dependencies

Integration

• Added routes to grids.routes.ts for all 14 samples

Implementation Pattern

Web Components → Angular adaptation:

// Component uses CUSTOM_ELEMENTS_SCHEMA for custom element support
@Component({
  selector: 'app-grid-lite-overview',
  templateUrl: './grid-lite-overview.component.html',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class GridLiteOverviewComponent {
  // Cell templates created programmatically
  cellTemplate: (params: any) => {
    const rating = document.createElement('igc-rating');
    rating.setAttribute('value', params.value.toString());
    return rating;
  }
}

<!-- Angular event binding with proper typing -->
<igc-grid-lite 
  [columns]="columns" 
  [data]="data"
  (sorting)="handleSorting($event)"
  (sorted)="handleSorted($event)">
</igc-grid-lite>

All samples follow existing repository patterns and pass lint/security checks.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: ng build --configuration production (my-app) (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Transfer grid-lite samples from igniteui-wc-examples repository (branch: dmdimitrov/grid-lite-samples, commit: 145d203c64c3d9ddb174607e0b57ae0db119e80b) to igniteui-angular-samples repository.

Source location: https://github.com/IgniteUI/igniteui-wc-examples/tree/145d203c64c3d9ddb174607e0b57ae0db119e80b/samples/grids/grid-lite

The following 14 samples need to be transferred and adapted for Angular:

1. column-config-dynamic
2. column-config-headers
3. column-config-simple
4. data-binding-dynamic
5. filtering-events
6. filtering-pipeline
7. filtering-simple
8. overview
9. sorting-events
10. sorting-grid-config
11. sorting-pipeline
12. sorting-simple
13. styling-custom
14. styling-themes

Requirements for each Angular sample:

1. Create Angular components that use igc-grid-lite as a custom element
2. Add CUSTOM_ELEMENTS_SCHEMA to each component's schemas array in the @component decorator
3. Import the necessary Web Components from igniteui-webcomponents package
4. Convert Web Component templates to Angular template syntax
5. Use Angular event binding syntax (e.g., (sortingDone)="handler($event)" instead of @sortingDone)
6. Maintain the same functionality as the original Web Components samples
7. Follow the existing structure and patterns used in the igniteui-angular-samples repository
8. Include proper TypeScript typing for the igc-grid-lite component
9. Ensure all data binding, filtering, sorting, and styling features work correctly in Angular context

The samples should be created in a similar folder structure (e.g., samples/grids/grid-lite/) in the Angular repository, following existing Angular sample conventions.

Each component should include:

• Component TypeScript file with CUSTOM_ELEMENTS_SCHEMA
• HTML template using custom element
• Any necessary styling files
• Proper imports: import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core' and Web Components imports
• Angular-specific event handling and property binding

Reference the source files from the Web Components examples to ensure feature parity.

This pull request was created as a result of the following prompt from Copilot chat.

Transfer grid-lite samples from igniteui-wc-examples repository (branch: dmdimitrov/grid-lite-samples, commit: 145d203c64c3d9ddb174607e0b57ae0db119e80b) to igniteui-angular-samples repository.

Source location: https://github.com/IgniteUI/igniteui-wc-examples/tree/145d203c64c3d9ddb174607e0b57ae0db119e80b/samples/grids/grid-lite

The following 14 samples need to be transferred and adapted for Angular:

1. column-config-dynamic
2. column-config-headers
3. column-config-simple
4. data-binding-dynamic
5. filtering-events
6. filtering-pipeline
7. filtering-simple
8. overview
9. sorting-events
10. sorting-grid-config
11. sorting-pipeline
12. sorting-simple
13. styling-custom
14. styling-themes

Requirements for each Angular sample:

1. Create Angular components that use igc-grid-lite as a custom element
2. Add CUSTOM_ELEMENTS_SCHEMA to each component's schemas array in the @component decorator
3. Import the necessary Web Components from igniteui-webcomponents package
4. Convert Web Component templates to Angular template syntax
5. Use Angular event binding syntax (e.g., (sortingDone)="handler($event)" instead of @sortingDone)
6. Maintain the same functionality as the original Web Components samples
7. Follow the existing structure and patterns used in the igniteui-angular-samples repository
8. Include proper TypeScript typing for the igc-grid-lite component
9. Ensure all data binding, filtering, sorting, and styling features work correctly in Angular context

The samples should be created in a similar folder structure (e.g., samples/grids/grid-lite/) in the Angular repository, following existing Angular sample conventions.

Each component should include:

• Component TypeScript file with CUSTOM_ELEMENTS_SCHEMA
• HTML template using custom element
• Any necessary styling files
• Proper imports: import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core' and Web Components imports
• Angular-specific event handling and property binding

Reference the source files from the Web Components examples to ensure feature parity.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[kdinev]

@copilot We have icons for both youtube and x (twitter) inmaterial-icons-extended