Getting StartedInstallation and setup guides 6
FormInput and selection components 26
LayoutWorkflow and structural layout components 10
NavigationMenu surfaces and hierarchical actions 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 6
UtilityGeneral-purpose interface utilities 7
Overview API Styling Examples

API reference

TngFileUploadDirective is a headless behavior directive — no wrapper component is required. Apply it to any element and wire the inputs and outputs directly on the host.

Directive

Selector: [tngFileUpload]  ·  Export: tngFileUpload

Inputs

InputTypeDefaultNotes
acceptstring | string[][] Accepted file types as extensions (.png), exact MIME types (image/png), or wildcard MIME groups (image/*). A string value is split on commas. An empty array allows all types.
multiplebooleanfalse Permits selecting more than one file at once. Extra files dropped when false are rejected with reason multiple.
maxSizenumber | nullnull Maximum allowed file size in bytes. null disables size checking. Files exceeding this limit are rejected with reason size.
disabledbooleanfalse Makes the drop zone fully passive — drag events are ignored and no outputs are emitted. Reflects data-disabled on the host element.

Outputs

OutputPayload typeNotes
filesSelectedTngFileUploadSelectedEvent Emitted when one or more files pass validation. Payload contains files: readonly File[] and source: 'drop' | 'input'.
filesRejectedTngFileUploadRejectedEvent Emitted when one or more files fail validation. Payload contains rejected: readonly TngFileUploadRejectedFile[] (each with file, reason, and message) and the co-emitted accepted files for correlation.
dragStateChangeTngFileUploadDragState Emitted whenever the drag interaction state transitions between 'idle', 'dragging', and 'rejected'.

Public state

MemberTypeNotes
dragStateSignal<TngFileUploadDragState> Reactive drag state readable via the tngFileUpload template reference. Useful when template-driven feedback is preferred over the output event.

Drag and drop behavior

  • Drops are accepted when the pointer releases over the host or any nested content inside the zone. The directive listens on the host and processes bubbled drop events from descendants.
  • Moving between the host and its child elements does not prematurely clear data-dragging — dragleave events whose relatedTarget is still inside the host are ignored.
  • File selection outputs are emitted inside Angular's zone so signal- and template-bound feedback (for example an @if status line) updates immediately after drop without requiring a follow-up pointer move.

Type reference

TypeDefinition
TngFileUploadDragState'idle' | 'dragging' | 'rejected'
TngFileUploadSource'drop' | 'input'
TngFileUploadRejectReason'disabled' | 'multiple' | 'type' | 'size' | 'empty'
TngFileUploadRejectedFile{ file: File; reason: TngFileUploadRejectReason; message: string }
TngFileUploadSelectedEvent{ files: readonly File[]; source: TngFileUploadSource }
TngFileUploadRejectedEvent{ rejected: readonly TngFileUploadRejectedFile[]; accepted: readonly File[]; source: TngFileUploadSource }