UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Data List

data-listui
Boilerplate repo

Vertical key/value list for showing read-only metadata — invoice details, settings summaries, profile fields. Pair items in label/value rows; supports inline edit triggers and trailing actions per row.

Installation

$npx uipkge-ng@latest add data-list
Manifest:https://uipkge.dev/r/angular/data-list.jsonInstalls to:src/app/components/ui/data-list/

Examples

Loading interactive previews…

Props

NameType / ValuesDefaultRequired
classstring—optional

Used by

Files installed (2)

  • src/app/components/ui/data-list/data-list.component.ts1.2 kB
    import { Component, Input, ChangeDetectionStrategy } from '@angular/core'
import { cn } from '@/lib/utils'

/**
 * Angular port of UIPKGE DataList. Vertical key/value list for read-only
 * metadata rows. Class strings mirror the Vue source.
 */
@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-data-list, [ui-data-list]',
  standalone: true,
  host: {
    '[attr.data-slot]': '"data-list"',
    '[attr.data-uipkge]': '""',
    '[class]': 'hostClass',
  },
  template: `<ng-content />`,
})
export class UiDataListComponent {
  @Input('class') className?: string

  get hostClass(): string {
    return cn('flex flex-col', this.className)
  }
}

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-data-list-item, [ui-data-list-item]',
  standalone: true,
  host: {
    '[attr.data-slot]': '"data-list-item"',
    '[attr.data-uipkge]': '""',
    '[class]': 'hostClass',
  },
  template: `<ng-content />`,
})
export class UiDataListItemComponent {
  @Input('class') className?: string

  get hostClass(): string {
    return cn(
      'flex flex-row items-center justify-between border-b py-4 transition-colors duration-200 first:pt-0 last:border-0 last:pb-0',
      this.className,
    )
  }
}
  • src/app/components/ui/data-list/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/angular/data-list.json