Merge pull request #69 from qualcomm/olaf/combobox-angular-highlight

feat: wire `highlightMatchingText` in angular combobox
Signed-off-by: Dustin Pham <dustinpham95@gmail.com>

Author: R-Bower

packages/docs/angular-docs/src/routes/components+/combobox+/demos/combobox-highlight-demo.ts

@@ -6,7 +6,6 @@ import type {ComboboxInputValueChangeDetails} from "@qualcomm-ui/core/combobox"
 
 import {countries} from "./country-list"
 
-// TODO: highlightMatchingText prop not yet implemented in Angular
 @Component({
   imports: [ComboboxModule],
   selector: "combobox-highlight-demo",

packages/frameworks/angular-core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @qualcomm-ui/angular-core
 
+## 1.1.0 (2025/11/30)
+
+### Features
+
+- wire highlightMatchingText in angular combobox
+
 ## 1.0.6 (2025/11/25)
 
 ### Miscellaneous Chores

packages/frameworks/angular-core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qualcomm-ui/angular-core",
   "description": "Design-agnostic Angular building blocks and utilities.",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "author": "Ryan Bower",
   "license": "BSD-3-Clause-Clear",
   "repository": "https://github.com/qualcomm/qualcomm-ui",

packages/frameworks/angular-core/src/highlight/highlight.directive.ts

@@ -9,13 +9,13 @@ import {highlightWord} from "@qualcomm-ui/utils/highlight-word"
 @Component({
   selector: "[q-highlight]",
   standalone: true,
+  // prevent prettier formatting from introducing whitespaces in the markup
+  // prettier-ignore
   template: `
     @for (chunk of chunks(); track $index) {
       @if (chunk.match) {
         <mark>{{ chunk.text }}</mark>
-      } @else {
-        {{ chunk.text }}
-      }
+      } @else {{{chunk.text}}}
     }
   `,
 })

packages/frameworks/angular/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @qualcomm-ui/angular
 
+## 1.6.0 (2025/11/30)
+
+### Features
+
+- wire highlightMatchingText in angular combobox
+
+### Miscellaneous Chores
+
+- **deps:** update dependencies [@qualcomm-ui/angular-core]
+
 ## 1.5.0 (2025/11/25)
 
 ### Features

packages/frameworks/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qualcomm-ui/angular",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "author": "Ryan Bower",
   "license": "BSD-3-Clause-Clear",
   "description": "QUI Angular Components",
@@ -56,7 +56,7 @@
     "@floating-ui/dom": "^1.7.0",
     "@jsdevtools/coverage-istanbul-loader": "~3.0.5",
     "@module-federation/enhanced": "0.21.2",
-    "@qualcomm-ui/angular-core": "workspace:^1.0.6",
+    "@qualcomm-ui/angular-core": "workspace:^1.1.0",
     "@qualcomm-ui/cli": "workspace:^1",
     "@qualcomm-ui/core": "workspace:^1.0.8",
     "@qualcomm-ui/qds-core": "workspace:^1.6.0",
@@ -99,7 +99,7 @@
     "@angular/forms": ">=20.1.0 <21",
     "@angular/platform-browser": ">=20.1.0 <21",
     "@angular/platform-browser-dynamic": ">=20.1.0 <21",
-    "@qualcomm-ui/angular-core": "workspace:^1.0.6",
+    "@qualcomm-ui/angular-core": "workspace:^1.1.0",
     "@qualcomm-ui/core": "workspace:^1.0.8",
     "@qualcomm-ui/qds-core": "workspace:^1.6.0",
     "@qualcomm-ui/utils": "workspace:^1.0.3",

packages/frameworks/angular/src/combobox/combobox-items.component.ts

@@ -1,9 +1,10 @@
 // Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
 // SPDX-License-Identifier: BSD-3-Clause-Clear
 
-import {Component} from "@angular/core"
+import {booleanAttribute, Component, input} from "@angular/core"
 
 import {useComboboxContext} from "@qualcomm-ui/angular-core/combobox"
+import type {Booleanish} from "@qualcomm-ui/utils/coercion"
 
 @Component({
   selector: "q-combobox-items",
@@ -21,14 +22,32 @@ import {useComboboxContext} from "@qualcomm-ui/angular-core/combobox"
       track comboboxContext().collection.getItemValue(item)
     ) {
       <div q-combobox-item [item]="item">
-        <span q-combobox-item-text>
-          {{ comboboxContext().collection.stringifyItem(item) }}
-        </span>
+        @if (highlightMatchingText()) {
+          <span
+            ignoreCase
+            q-combobox-item-text
+            q-highlight
+            [query]="comboboxContext().inputValue"
+            [text]="comboboxContext().collection.stringifyItem(item)"
+          ></span>
+        } @else {
+          <span q-combobox-item-text>
+            {{ comboboxContext().collection.stringifyItem(item) }}
+          </span>
+        }
         <span q-combobox-item-indicator></span>
       </div>
     }
   `,
 })
 export class ComboboxItemsComponent {
+  /**
+   * Set to `true` to highlight option text matches during filtering.
+   */
+  readonly highlightMatchingText = input<boolean | undefined, Booleanish>(
+    undefined,
+    {transform: booleanAttribute},
+  )
+
   protected readonly comboboxContext = useComboboxContext()
 }

packages/frameworks/angular/src/combobox/combobox.component.ts

@@ -95,7 +95,7 @@ import {provideQdsComboboxContext} from "./qds-combobox-context.service"
                         ignoreCase
                         q-combobox-item-text
                         q-highlight
-                        [query]="inputValue()"
+                        [query]="comboboxContext.context().inputValue"
                         [text]="collection().stringifyItem(item)"
                       ></span>
                     } @else {
@@ -125,7 +125,7 @@ import {provideQdsComboboxContext} from "./qds-combobox-context.service"
                       ignoreCase
                       q-combobox-item-text
                       q-highlight
-                      [query]="inputValue()"
+                      [query]="comboboxContext.context().inputValue"
                       [text]="collection().stringifyItem(item)"
                     ></span>
                   } @else {