Overview

Pattern: Framework data + Custom component

The data layer (data retrieval, filters, paging, CRUD, permissions) comes from the WUIC framework, but you write the UI rendering yourself in plain Angular. You use <wuic-data-source> to get a reactive stream of rows + metadata, and subscribe to fetchInfo$ to build the layout you want (cards, KPI dashboard, kanban, calendar, map, ...).

When to Use It

The entity already exists in the framework (scaffolding done) and you want to reuse CRUD, paging, filters, and permissions.
The standard UX (<wuic-list-grid>) does not fit the use case.
You want mobile-first UI or a brand-specific layout.
You have hierarchical or aggregated data that doesn't fit into a flat table.

Architecture

Snippet 1text

Browser                                Framework data
  |                                          |
  |  <wuic-data-source #ds                   |
  |     [hardcodedRoute]="'cities'">         |
  |                                          |
  |       fetchInfo$ (Observable) <-- DataSourceComponent (handles CRUD + filters)
  |              |

Responsibilities:

DataSource (framework): data and metadata fetching, paging, filters, CRUD sync. Exposes fetchInfo$ (Observable), metaInfo, helpers like setCurrent, addNewRecord, syncData.
Custom component (yours): subscribes to fetchInfo$, transforms the rows into any visualization, calls datasource methods to trigger actions (filter, edit, refresh).

Key Snippet

Snippet 2HTML

<wuic-data-source #ds [hardcodedRoute]="'cities'" [autoload]="true"></wuic-data-source>

<div class="cards-grid">
  @for (city of rows(); track city.cityid) {
    <p-card [header]="city.cityname">
      <p>{{ city.stateprovincename }}</p>
      <p>Population: {{ city.latestrecordedpopulation | number }}</p>

Snippet 3ts

import { Component, ViewChild, AfterViewInit, signal } from '@angular/core';
import { CardModule } from 'primeng/card';
import { CommonModule } from '@angular/common';
import { DataSourceComponent } from 'wuic-framework-lib';

@Component({
  selector: 'app-cities-cards',

Trade-offs

Pros	Cons
You leverage CRUD, filters, paging, permissions, and audit of the framework	You have to write and maintain the UI
Completely free UX	You must respect the `fetchInfo$` contract
Change only UI without touching backend	Higher development cost than Pattern 1
All CRUD events remain hookable server-side	You need to know the framework client APIs (DataSourceComponent, MetaInfo)

Live Examples in WuicTest

Cities cards → data source on cities + responsive p-card grid with client filter. Source folder: wwwroot/src/app/component/examples/pattern-2/2a-cities-cards/. Open demo.
Cities KPI dashboard → same datasource, client-side aggregations (count, top-N, group-by state) in p-card. Source folder: wwwroot/src/app/component/examples/pattern-2/2b-cities-kpi-dashboard/. Open demo.
Custom cities list → wraps <app-custom-list> (reusable Angular component IDataBoundHostComponent) on <wuic-data-source> + <wuic-filter-bar> + <wuic-pager>. Demonstrates how a reusable custom renderer plugs into the WUIC data layer. Source folder: wwwroot/src/app/component/examples/pattern-2/2c-custom-cities-list/. Open demo.