Main
 Installation Versioning Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Flag New Form field Highlight Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation Smart search New
Icons
Interface and examples language
English
Version
20.3.1
Highlight
Source code

Highlighting matches helps users quickly understand why a result is relevant and speeds up navigation through lists. Depending on the context, one of two styles is used.

Koobiq provides two pipes for highlighting text matches — kbqHighlightBackground and mcHighlight. Both take a string and a search argument, wrapping the found matches in a <mark> tag — kbq-highlight-background for the background-color style and kbq-highlight for the bold style.

Background color

Used in selects and other dropdown pickers with filtering, and to highlight matches in complex content: descriptions, messages, and articles. The solid background remains legible in hover and active states within overlays and makes matches noticeable even in long texts.

Matches in text:

Matches in search results with a complex layout:

Matches in a table:

Bold

This style is unobtrusive and ideal for quickly scanning familiar data: the user immediately sees that the searched word is in the row but is not distracted from the main choice.

<span [innerHTML]="item | mcHighlight: searchQuery"></span>
Suggestions for improvement
If you found a mistake or want to improve the article, create an issue on GitHub.