feat(filter-field): Added highlighting of the currend input value to …

…the options. fixes #203
dynatrace-oss · Feb 4, 2020 · 1effd08 · 1effd08
1 parent 407dc6c
commit 1effd08
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/components/filter-field/src/filter-field-module.ts b/components/filter-field/src/filter-field-module.ts
@@ -30,6 +30,7 @@ import { DtFilterField } from './filter-field';
 import { DtFilterFieldRange } from './filter-field-range/filter-field-range';
 import { DtFilterFieldRangeTrigger } from './filter-field-range/filter-field-range-trigger';
 import { DtFilterFieldTag } from './filter-field-tag/filter-field-tag';
+import { DtHighlightModule } from '@dynatrace/barista-components/highlight';
 
 @NgModule({
   imports: [
@@ -42,6 +43,7 @@ import { DtFilterFieldTag } from './filter-field-tag/filter-field-tag';
     DtButtonGroupModule,
     DtLoadingDistractorModule,
     DtOverlayModule,
+    DtHighlightModule,
   ],
   exports: [
     DtAutocompleteModule,

diff --git a/components/filter-field/src/filter-field.html b/components/filter-field/src/filter-field.html
@@ -53,10 +53,14 @@
           <dt-option
             *ngFor="let optionDef of optionOrGroupDef.group!.options"
             [value]="optionDef"
-          >{{optionDef.option!.viewValue}}</dt-option>
+          >
+            <dt-highlight [term]="_inputValue">{{optionDef.option!.viewValue}}</dt-highlight>
+          </dt-option>
         </dt-optgroup>
         <ng-template #options>
-          <dt-option [value]="optionOrGroupDef">{{ optionOrGroupDef.option!.viewValue}}</dt-option>
+          <dt-option [value]="optionOrGroupDef">
+            <dt-highlight [term]="_inputValue">{{ optionOrGroupDef.option!.viewValue}}</dt-highlight>
+          </dt-option>
         </ng-template>
       </ng-container>
     </dt-autocomplete>