Import
<smart-import> is a button with an upload icon and a hidden file input. Clicking it opens the native file dialog; the chosen file is emitted through the set output.
Usage
<smart-import [accept]="accept" (set)="onImport($event)" />
Components
ImportComponent (<smart-import>)
Renders a <smart-button> with a projected upload icon next to a hidden <input type="file">. The button click forwards to the input, and the input's change event goes through ImportBaseComponent.onFileSelected. As with export, the button must use the standard implementation so the projected icon survives.
ImportBaseComponent (abstract)
The base directive. onFileSelected(event) reads the first selected file, clears the input so the same file can be chosen again, and emits it; it throws when the dialog returns no file. triggerFileInput(inputEl) opens the dialog.
API
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
accept | InputSignal<string | undefined> | 'application/json' | Value of the accept attribute on the hidden file input; filters the native dialog |
class | InputSignal<string> | '' | Extra CSS classes (alias for cssClass) |
Outputs
| Output | Type | Description |
|---|---|---|
set | OutputEmitterRef<File> | Emits the selected File once per dialog confirmation |
Source
The component lives in packages/shared/angular/src/lib/components/import. It has no Claude Code skill of its own yet. The CRUD list page uses it to load items from a JSON file.