ng-bootstrap · gpolychronis · gpolychronis · gpolychronis · Apr 30, 2020 · gpolychronis
diff --git a/src/typeahead/typeahead-window.ts b/src/typeahead/typeahead-window.ts
@@ -116,6 +184,8 @@ export class NgbTypeaheadWindow implements OnInit {

  select(item) { this.selectEvent.emit(item); }

+  getContext() { return this; }
diff --git a/demo/src/app/components/typeahead/demos/grouping/typeahead-grouping.ts b/demo/src/app/components/typeahead/demos/grouping/typeahead-grouping.ts
+@Component({
+  selector: 'ngbd-typeahead-grouping-internal',
+  template: `
+      <div *ngFor="let category of categories">
+        <h3>{{category.label}}</h3>
+        <div *ngFor="let item of category">
+          <ngb-typeahead-window-item
+            [result]="item.label"
+            [index]="item.idx"
+            [context]="context">
+          </ngb-typeahead-window-item>
+        </div>
+      </div>
+  `
+})
+export class NgbdTypeaheadGroupingInternal {
+  categories: any[];
+
+  @Input()
+  context: any;
+
+  @Input()
+  set results(results: any[]) {
+    let references = {};
+    let categories: any[] = [];
+    let idx = 0;
+    for (const result of results) {
+      const category: string = result.toUpperCase().charAt(0);
+      if (!references[category]) {
+        references[category] = categories.length;
+        const c = [];
+        (c as any).label = category;
+        categories.push(c);
+      }
+      categories[references[category]].push({
+        label: result, idx: idx++
+      });
+    }
+    this.categories = categories;
+  }
+}
diff --git a/demo/src/app/components/typeahead/demos/grouping/typeahead-grouping.ts b/demo/src/app/components/typeahead/demos/grouping/typeahead-grouping.ts
+  templateUrl: './typeahead-grouping.html',
+  styles: [`.form-control { width: 300px; }`]
+})
+export class NgbdTypeaheadGrouping {
diff --git a/src/carousel/carousel.ts b/src/carousel/carousel.ts
+      <div *ngFor="let slide of slides; index as i; count as c" class="carousel-item"
+      [class.active]="slide.id === activeId" [id]="slide.id + '-slide'" role="tabpanel">
diff --git a/src/typeahead/typeahead.ts b/src/typeahead/typeahead.ts
@@ -45,7 +48,7 @@ const NGB_TYPEAHEAD_VALUE_ACCESSOR = {
 */
 export interface NgbTypeaheadSelectItemEvent<T = any> {
  /**
-   * The item from the result list about to be selected.
+   * The item from the item list about to be selected.
diff --git a/src/typeahead/typeahead.ts b/src/typeahead/typeahead.ts
+  set autocomplete(_autocomplete: string) {
+    this._autocomplete = _autocomplete;
+    if (this._inputRef) {
+      this._inputRef.nativeElement.setAttribute('autocomplete', this._autocomplete);
diff --git a/src/typeahead/typeahead.ts b/src/typeahead/typeahead.ts
+   * If `true`, the first item in the item list will always stay focused while typing.
   */
  @Input() focusFirst: boolean;

  /**
-   * The function that converts an item from the result list to a `string` to display in the `<input>` field.
+   * The function that converts an item from the item list to a `string` to display in the `<input>` field.
diff --git a/src/typeahead/typeahead.ts b/src/typeahead/typeahead.ts
@@ -138,7 +146,7 @@ export class NgbTypeahead implements ControlValueAccessor,
  @Input() ngbTypeahead: (text: Observable<string>) => Observable<readonly any[]>;

  /**
-   * The function that converts an item from the result list to a `string` to display in the popup.
+   * The function that converts an item from the item list to a `string` to display in the popup.
diff --git a/src/typeahead/typeahead.ts b/src/typeahead/typeahead.ts
+    </button>
+  `
+})
+export class NgbTypeaheadItem {
diff --git a/src/typeahead/typeahead-window.ts b/src/typeahead/typeahead-window.ts
+/**
+ * The context for the typeahead content template in case you want to override the default one.
+ */
+export interface ContentTemplateContext {
diff --git a/src/typeahead/typeahead-window.ts b/src/typeahead/typeahead-window.ts
-          [ngTemplateOutletContext]="{result: result, term: term, formatter: formatter}"></ng-template>
-      </button>
+    <ng-template #defaultContentTemplate let-r="results">
+      <ng-template ngFor [ngForOf]="r" let-item let-idx="index">
diff --git a/src/typeahead/typeahead-window.ts b/src/typeahead/typeahead-window.ts
    </ng-template>
+    <ng-template [ngTemplateOutlet]="contentTemplate || defaultContentTemplate"
+                 [ngTemplateOutletContext]="{results: results}"></ng-template>
diff --git a/demo/src/app/components/typeahead/demos/grouping/typeahead-grouping.ts b/demo/src/app/components/typeahead/demos/grouping/typeahead-grouping.ts
+  templateUrl: './typeahead-grouping.html',
+  styles: [`.form-control { width: 300px; }`]
+})
+export class NgbdTypeaheadGrouping {
		@@ -116,6 +184,8 @@ export class NgbTypeaheadWindow implements OnInit {

		select(item) { this.selectEvent.emit(item); }

		getContext() { return this; }
		<div *ngFor="let slide of slides; index as i; count as c" class="carousel-item"
		[class.active]="slide.id === activeId" [id]="slide.id + '-slide'" role="tabpanel">