Angular API

import { DocumentExplorerComponent } from '@document-explorer/angular';

"styles": ["@document-explorer/angular/styles.css", "src/styles.css"]

<doc-explorer>

Standalone, OnPush, signal-driven, zoneless-ready.

Inputs

Identical in name and meaning to the React props:

data · mapper · title · rootLabel · view · views · defaultView · search · sort · columns · columnAlign · resizableColumns · columnWidths · selection · actions · interaction · loading · error · locale · className

<doc-explorer
  [data]="apiResponse"
  [mapper]="mapper"
  title="Documents"
  [search]="{ scope: 'global', searchableFields: ['metadata.owner'] }"
  [selection]="{ mode: 'multiple', folders: false }"
  [actions]="{ view: true, download: true }"
  [columns]="columns"
/>

Bind object inputs from a field, not inline

An object literal written inline in a template is a new object on every change detection pass. Declare it as a component field instead.

Outputs

Output	Payload
folderOpen	DocumentItem | null
documentOpen	DocumentItem
selectionChange	DocumentItem[]
searchChange	string
sortChange	SortState
viewChange	ExplorerView
documentView	DocumentItem
documentDownload	DocumentItem
action	{ actionId: string; item: DocumentItem }
columnResize	{ key: string; width: number; widths: ColumnWidths }

Template slots

Slot	Context
#deFile	the file item
#deFolder	the folder item
#deEmpty	—
#deToolbar	—

Plus one template per column, matched by key with the deColumn directive — the Angular equivalent of React's ColumnDef.render:

Directive	Context
deColumn="<key>"	$implicit / item, and value (the formatted cell text)

<ng-template deColumn="metadata.owner" let-item let-value="value">
  <span class="de-avatar">{{ initials(value) }}</span>
  <span class="de-avatar-label">{{ value }}</span>
</ng-template>

See custom cell content.

<doc-explorer [data]="documents">
  <ng-template #deFile let-item>
    <my-file-card [file]="item" />
  </ng-template>
</doc-explorer>

avatarColumn(options)

Returns { column, options } — the ColumnDef for [columns], and the options to feed <de-avatar-cell> in a matching deColumn template. See avatars.

readonly owner = avatarColumn({ key: 'metadata.owner', display: 'avatar' });

badgeColumn(options)

Returns { column, options } — the ColumnDef for [columns], and the options to feed <de-badge-cell> in a matching deColumn template. See badges.

ExplorerStoreService

The signal bridge to the core store, provided by the component. Inject it from a child, or provide it yourself to drive the explorer from outside.

const store = inject(ExplorerStoreService);
store.snapshot();            // Signal<ExplorerSnapshot>
store.actions.openFolder('1');

Exported sub-components

DeBreadcrumbsComponent · DeSearchInputComponent · DeViewSwitcherComponent · DeListViewComponent · DeGridViewComponent · DeTreeViewComponent · DeSelectionBarComponent · DeEmptyStateComponent · DeLoadingStateComponent · DeErrorStateComponent · DeIconComponent · DeUiIconComponent

Plus DeColumnResizerComponent.

Directives: DeColumnTemplateDirective (deColumn).

Pipes: DeCellValuePipe, DeCardMetaPipe, DeVisibleActionsPipe.