@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UIFileBrowser<M>

    A two-panel file browser block composing UITreeView, UIBreadcrumb, and a contents list.

    The tree sidebar shows the folder hierarchy. Selecting a folder displays its contents (files and sub-folders) in the main panel. A breadcrumb bar shows the current path and allows quick navigation to ancestor folders.

    <ui-file-browser [datasource]="ds" (fileActivated)="open($event)" />

    With custom entry template

    <ui-file-browser [datasource]="ds">
      <ng-template #entryTemplate let-entry>
        <span>{{ entry.name }} — {{ entry.meta?.size }}</span>
      </ng-template>
    </ui-file-browser>

    Type Parameters

    • M = unknown

    Implements

    • AfterViewInit
    Index

    Constructors

    constructor

    Properties

    ariaLabel datasource directoryChange entryTemplate fileActivated metadataProvider name rootLabel selectedEntry showDetails showSidebar viewMode

    Methods

    navigateToDirectory navigateToRoot ngAfterViewInit

    Constructors

    • Type Parameters

      • M = unknown

      Returns UIFileBrowser<M>

    Properties

    ariaLabel: InputSignal<string> = ...

    Accessible label for the file browser.

    datasource: InputSignal<FileBrowserDatasource<M>> = ...

    The datasource providing the file/directory structure.

    directoryChange: OutputEmitterRef<DirectoryChangeEvent<M>> = ...

    Emitted when the current directory changes.

    entryTemplate: Signal<TemplateRef<EntryTemplateContext<M>> | undefined> = ...

    Optional custom template for rendering each entry in the contents panel.

    fileActivated: OutputEmitterRef<FileActivateEvent<M>> = ...

    Emitted when a file (non-directory) is activated (double-click / Enter).

    metadataProvider: InputSignal<MetadataProvider<M> | null> = ...

    Callback that extracts metadata fields from a selected entry. Required for the details pane to display meaningful data.

    name: InputSignal<string | undefined> = ...

    Optional persistence key. When set, sidebar and details panel widths are saved to and restored from storage.

    rootLabel: InputSignal<string> = ...

    Label for the root breadcrumb item.

    selectedEntry: ModelSignal<FileBrowserEntry<M> | null> = ...

    The currently selected entry (two-way bindable).

    showDetails: InputSignal<boolean> = ...

    Whether to show the details pane for the selected entry.

    showSidebar: InputSignal<boolean> = ...

    Whether to show the sidebar tree panel.

    viewMode: InputSignal<FileBrowserViewMode> = ...

    Active view mode for the contents panel.

    Methods

    • Navigate to a specific directory entry.

      Parameters

      Returns void

    • Navigate to the root directory.

      Returns void

    • A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

      Returns void

    Settings

    Member Visibility

    On This Page

    Basic usageWith custom entry template
    Constructors
    Properties
    Methods