@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

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

    Methods

    navigateToDirectory navigateToRoot ngAfterViewInit setViewMode toggleDetails

    Constructors

    • Type Parameters

      • M = unknown

      Returns UIFileBrowser<M>

    Properties

    allowedTypes: InputSignal<string | AllowedFileTypes | null> = ...

    Optional allowed-types mask. Accepts either a comma-separated string in the <input accept> format (.ext, type/subtype, type/*) or a pre-parsed AllowedFileTypes object.

    When set, files that do not match are either grayed-out and non-interactive (default) or hidden entirely if hideFiltered is true. Directories are never filtered.

    <!-- string attribute -->
    <ui-file-browser allowedTypes=".ts,.tsx,image/*" />

    <!-- bound object -->
    <ui-file-browser [allowedTypes]="myAllowedTypes" />
    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).

    hideFiltered: InputSignal<boolean> = ...

    When true, entries that do not pass the allowedTypes filter are removed from the contents list entirely. When false (default) they are still rendered but dimmed and non-interactive.

    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: ModelSignal<boolean> = ...

    Whether to show the details pane for the selected entry (two-way bindable).

    showSidebar: InputSignal<boolean> = ...

    Whether to show the sidebar tree panel.

    showToolbar: InputSignal<boolean> = ...

    When true, a toolbar is rendered in the header that lets the user switch between view modes and toggle the details panel.

    viewMode: ModelSignal<FileBrowserViewMode> = ...

    Active view mode for the contents panel (two-way bindable).

    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

    • Set the active view mode (used by the toolbar).

      Parameters

      Returns void

    • Toggle the details panel (used by the toolbar).

      Returns void

    Settings

    Member Visibility

    On This Page

    Basic usageWith custom entry template
    Constructors
    Properties
    Methods