Accessible name for the text box, when no visible label sits beside it.
Disables both the box and the browse button.
ReadonlyGridTrue while the icon fonts are being fetched so their glyphs can be measured.
Whether the icon grid is open.
ReadonlyPositionsBelow the field, or above it when there is no room.
The style given to a name typed by hand, when it names none itself.
What is in the text box, which may not yet be a complete class string.
Static ReadonlyGRID_Width the overlay opens at, so the grid is usable beside a narrow field.
"Showing N of M icons…" while the grid is cut short; empty otherwise.
Every icon on offer, each with the style that actually draws it.
True when more icons match than the grid draws, so the user is told to narrow the search.
True when the page could not be read and the short list is standing in.
How many icons match the search, including the ones past the grid's limit.
The icon drawn in the preview, or '' when nothing is set.
The icons to show, narrowed by the grid's search box: at most ICON_RESULT_LIMIT.
What the user typed into the grid's own search box.
Setting it marks the view, because this component is OnPush and the search may be set by a host as well as by the box — a value that does not repaint the grid is worse than no search at all.
The current icon's bare name, for the grid's selected state.
The icon class string, e.g. fa-solid fa-chart-column.
Writes the icon in the style that draws it, not in whatever the field defaulted to.
Clears the icon. A panel with none is a normal thing to want.
Closes the grid and puts focus back on the browse button.
Whether a grid cell is the current icon, under its own name or one of its aliases.
Typed text is normalized on the way out, so a bare name still renders.
The callback function to register
Registers a callback function that is called when the control's value changes in the UI.
This method is called by the forms API on initialization to update the form model when values propagate from the view to the model.
When implementing the registerOnChange method in your own value accessor,
save the given function so your class calls it at the appropriate time.
The following example stores the provided function as an internal method.
registerOnChange(fn: (_: any) => void): void {
this._onChange = fn;
}
When the value changes in the UI, call the registered function to allow the forms API to update itself:
host: {
'(change)': '_onChange($event.target.value)'
}
The callback function to register
Registers a callback function that is called by the forms API on initialization to update the form model on blur.
When implementing registerOnTouched in your own value accessor, save the given
function so your class calls it when the control should be considered
blurred or "touched".
The following example stores the provided function as an internal method.
registerOnTouched(fn: any): void {
this._onTouched = fn;
}
On blur (or equivalent), your class should call the registered function to allow the forms API to update itself:
host: {
'(blur)': '_onTouched()'
}
mj-icon-picker — choose a Font Awesome icon by looking at it.
Typing a class name is not something to ask of a user: the name has to be remembered exactly, and Font Awesome needs a style class beside it —
fa-chart-columnon its own renders nothing at all, which looks like a bug rather than a missing word. This searches the icons the page has actually loaded and writes a complete class string.The text box stays, because a user who knows the name is faster typing it, and because a value from elsewhere must remain editable. What it emits is normalized either way.
The grid opens in an overlay rather than inside the field. Anchored in the field it sat in whatever scrolling box the host had, widened that box and left the surrounding panel scrolling sideways — a picker must not resize the form it is part of.
Example