feat(typeahead): add support for the 'container' input

Closes #1105

Closes #1731

src/typeahead/typeahead-config.spec.ts

@@ -4,6 +4,7 @@ describe('ngb-typehead-config', () => {
   it('should have sensible default values', () => {
     const config = new NgbTypeaheadConfig();
 
+    expect(config.container).toBeUndefined();
     expect(config.editable).toBeTruthy();
     expect(config.focusFirst).toBeTruthy();
     expect(config.showHint).toBeFalsy();

src/typeahead/typeahead-config.ts

@@ -7,6 +7,7 @@ import {Injectable} from '@angular/core';
  */
 @Injectable()
 export class NgbTypeaheadConfig {
+  container;
   editable = true;
   focusFirst = true;
   showHint = false;

src/typeahead/typeahead.spec.ts

@@ -565,6 +565,37 @@ describe('ngb-typeahead', () => {
        }));
   });
 
+  describe('container', () => {
+
+    it('should be appended to the element matching the selector passed to "container"', () => {
+      const selector = 'body';
+      const fixture = createTestComponent(`<input [ngbTypeahead]="find" container="${selector}"/>`);
+
+      changeInput(fixture.nativeElement, 'one');
+      fixture.detectChanges();
+
+      expect(getWindow(fixture.nativeElement)).toBeNull();
+      expect(getWindow(document.querySelector(selector))).not.toBeNull();
+    });
+
+    it('should properly destroy typeahead window when the "container" option is used', () => {
+      const selector = 'body';
+      const fixture = createTestComponent(`<input *ngIf="show" [ngbTypeahead]="find" container="${selector}"/>`);
+
+      changeInput(fixture.nativeElement, 'one');
+      fixture.detectChanges();
+
+      expect(getWindow(fixture.nativeElement)).toBeNull();
+      expect(getWindow(document.querySelector(selector))).not.toBeNull();
+
+      fixture.componentInstance.show = false;
+      fixture.detectChanges();
+
+      expect(getWindow(fixture.nativeElement)).toBeNull();
+      expect(getWindow(document.querySelector(selector))).toBeNull();
+    });
+  });
+
   describe('auto attributes', () => {
 
     it('should have autocomplete, autocapitalize and autocorrect attributes set to off', () => {
@@ -774,6 +805,7 @@ class TestComponent {
 
   model: any;
   selectEventValue: any;
+  show = true;
 
   form = new FormGroup({control: new FormControl('', Validators.required)});
 

src/typeahead/typeahead.ts

@@ -90,6 +90,12 @@ export class NgbTypeahead implements ControlValueAccessor,
   private _zoneSubscription: any;
 
 
+  /**
+   * A selector specifying the element the tooltip should be appended to.
+   * Currently only supports "body".
+   */
+  @Input() container: string;
+
   /**
    * A flag indicating if model values should be restricted to the ones selected from the popup only.
    */
@@ -142,6 +148,7 @@ export class NgbTypeahead implements ControlValueAccessor,
       private _elementRef: ElementRef, private _viewContainerRef: ViewContainerRef, private _renderer: Renderer2,
       private _injector: Injector, componentFactoryResolver: ComponentFactoryResolver, config: NgbTypeaheadConfig,
       ngZone: NgZone) {
+    this.container = config.container;
     this.editable = config.editable;
     this.focusFirst = config.focusFirst;
     this.showHint = config.showHint;
@@ -153,7 +160,9 @@ export class NgbTypeahead implements ControlValueAccessor,
 
     this._zoneSubscription = ngZone.onStable.subscribe(() => {
       if (this.isPopupOpen()) {
-        positionElements(this._elementRef.nativeElement, this._windowRef.location.nativeElement, 'bottom-left');
+        positionElements(
+            this._elementRef.nativeElement, this._windowRef.location.nativeElement, 'bottom-left',
+            this.container === 'body');
       }
     });
   }
@@ -175,6 +184,7 @@ export class NgbTypeahead implements ControlValueAccessor,
   }
 
   ngOnDestroy(): void {
+    this._closePopup();
     this._unsubscribeFromUserInput();
     this._zoneSubscription.unsubscribe();
   }
@@ -241,6 +251,10 @@ export class NgbTypeahead implements ControlValueAccessor,
       this._windowRef.instance.id = this.popupId;
       this._windowRef.instance.selectEvent.subscribe((result: any) => this._selectResultClosePopup(result));
       this._windowRef.instance.activeChangeEvent.subscribe((activeId: string) => this.activeDescendant = activeId);
+
+      if (this.container === 'body') {
+        window.document.querySelector(this.container).appendChild(this._windowRef.location.nativeElement);
+      }
     }
   }