@teranga-ds/angular

Standalone Angular directives for all 79 Teranga DS Web Components. Full TypeScript support, proper Angular event binding, and two-way data binding where applicable.

Installation

npm install @teranga-ds/angular @teranga-ds/components

Setup

Add the global CSS to your angular.json:

"styles": [
  "node_modules/@teranga-ds/components/dist/teranga-ds/teranga-ds.css"
]

Usage

Import standalone components directly:

import { Component } from '@angular/core';
import { TgButton, TgInput, TgDataTable, TgKpiCard } from '@teranga-ds/angular';

@Component({
  standalone: true,
  imports: [TgButton, TgInput, TgDataTable, TgKpiCard],
  template: `
    <tg-kpi-card heading="Parcelles" value="18" icon="🗺️" trend="up"></tg-kpi-card>

    <tg-data-table
      [columns]="columns"
      [rows]="rows"
      selectable
      striped
    ></tg-data-table>

    <tg-input
      label="Rechercher"
      placeholder="Filtrer…"
      (tgChange)="onSearch($event)"
    ></tg-input>

    <tg-button variant="primary" (tgClick)="exporter()">
      Exporter
    </tg-button>
  `,
})
export class ParcellesComponent {
  columns = [/* ... */];
  rows = [/* ... */];
  onSearch(e: CustomEvent<string>) { /* ... */ }
  exporter() { /* ... */ }
}

Available Components (79)

All 79 components are available as standalone Angular directives:

Forms: TgButton · TgInput · TgTextarea · TgSelect · TgCheckbox · TgRadio · TgSwitch · TgCombobox · TgMultiSelect · TgDatePicker · TgTimePicker · TgAutocomplete · TgOtpInput · TgSlider · TgStepperInput · TgRichEditor

Data: TgTable · TgDataTable · TgCard · TgBadge · TgTag · TgKpiCard · TgStatWidget · TgTimeline · TgActivityFeed · TgTreeView · TgKanbanBoard · TgCalendarView · TgExpandableRow · TgHeatmap

Navigation: TgNavbar · TgSidebar · TgBreadcrumb · TgPagination · TgTabs · TgMegaMenu · TgCommandPalette · TgContextMenu · TgBottomNav · TgStepper · TgWizardNav · TgQuickSwitcher

Feedback: TgAlert · TgToast · TgModal · TgSpinner · TgSkeleton · TgProgress · TgTooltip · TgEmptyState · TgConfirmDialog · TgUndoSnackbar · TgStatusBadge · TgRetryUi

AI: TgChatMessage · TgStreamingResponse · TgPromptInput · TgConfidenceBadge · TgModelSelector · TgAiInsightCard · TgAiFeedback · TgSourceCitation · TgTokenUsage

Media: TgAudioPlayer · TgVideoPlayer · TgImageGallery · TgFileUpload

Real-time: TgLiveBadge · TgPresenceIndicator · TgActivityStream

Security: TgLoginForm · TgRoleBadge · TgSessionExpired · TgAvatar

Mobile: TgBottomSheet · TgFab · TgPullToRefresh · TgGlobalLoader · TgChat

Events

Stencil custom events work with Angular's () event binding:

<tg-button (tgClick)="onClick($event)">Click me</tg-button>
<tg-input (tgChange)="onChange($event)"></tg-input>
<tg-prompt-input (tgSubmit)="onAsk($event)"></tg-prompt-input>

Peer Dependencies

• @angular/core >= 17.0.0
• @angular/common >= 17.0.0

License

MIT © Teranga DS Contributors

MIT © République du Sénégal