The dt-highlight
component is designed to highlight some characters in a
string that has been searched of filtererd for. It can be either used for
filtering tables or in the drop-down panel of the
filter field.
<dt-highlight term="dynat">Dynatrace system Monitoring</dt-highlight>
Imports
You have to import the DtHighlightModule
when you want to use the
<dt-highlight>
component:
@NgModule({
imports: [DtHighlightModule],
})
class MyModule {}
Inputs
Name | Type | Default | Description |
---|---|---|---|
caseSensitive |
boolean |
false |
The caseSensitive input can be set to search for case sensitive occurrences. |
term |
string | string[] |
'' |
The term is the string or array of the strings that should be highlighted in the projected content. |
Usage
There are two options to use the highlight component in your template. If you
already have a native HTML element that contains your text (e.g. a paragraph
<p>
) you can keep this tag and apply the attribute dt-highlight
in
combination with the attribute term
on it.
If the text's wrapper is an Angular component, you have to use the highlight as an additional tag with a term-attribute to wrap your text. Find usage examples below.
Important notice: The projected content inside the highlight component will be escaped! You have to avoid any HTML Tags inside this component!
On a paragraph
<p dt-highlight term="dynat">Dynatrace system monitoring</p>
Without wrapping element
<dt-highlight term="dynat">Dynatrace system monitoring</dt-highlight>
A case sensitive highlight example
<input
type="text"
dtInput
value="Dy"
#search
aria-label="Insert the text that should be highlighted in the example below."
/>
<dt-highlight [term]="search.value" caseSensitive>
Dynatrace system Monitoring
</dt-highlight>
Multiple terms example
<input
type="text"
dtInput
value="accessibility,designers,developers"
#search
aria-label="Split terms by ','"
/>
<dt-highlight [term]="search.value.split(',')" caseSensitive>
Building experiences using Barista components means the accessibility
knowledge of the designers and developers who built them are available to
everyone and come for free with the usage of the components. Neverthesless it
is still important to check a few things post implementation. Therefore we
created the Barista Accessibility checklist which is based on the WCAG 2.1 AA
standard. Barista's patterns and components are perceivable, operable, and
understandable to users, even when using assistive technologies.
</dt-highlight>