Event List

Installation

Variants

Files installed (2)

• src/app/components/blocks/event-list/event-list.component.ts1.1 kB

  Copy

  // List of upcoming events in a SectionCard. Spell rows out inline with DataListItem —
  // title + Clock date + optional status Badge per row. Port of the Vue/React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { UiDataListComponent } from '@/ui/data-list/data-list.component'
  import { UiSectionCardComponent } from '@/ui/section-card/section-card.component'
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-event-list, [ui-event-list]',
    standalone: true,
    // React renders the SectionCard itself: the host stays out of layout and `class` goes to the card.
    host: { '[attr.class]': '"contents"' },
    imports: [UiDataListComponent, UiSectionCardComponent],
    template: `
      <ui-section-card data-slot="event-list" [title]="title" [description]="description" [class]="className">
        <ui-data-list>
          <ng-content />
        </ui-data-list>
      </ui-section-card>
    `,
  })
  export class UiEventListComponent {
    @Input() title = 'Upcoming Events'
    @Input() description?: string
    @Input('class') className?: string
  }
  

• src/app/components/blocks/event-list/index.ts0.1 kB

  Copy

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