Custom Template for Typeahead NgbTypeaheadWindow

Author: rmeansCreated Jun 16, 2017Updated May 27, 2026
Labelstype: featurecomponent: typeahead

I need a way to customize the template defined in NgbTypeaheadWindow so that I can change the markup that wraps the already configurable resultTemplate input property. Does anyone have any ideas how I can do this? Basically I need to display some extra markup before and after the items that are returned inside of the typeahead window because we did this in the AngularJS version of the bootstrap components.

Here is an example of the AngularJS way.

angular.module('app', ['ui.bootstrap'])
  .config(['$provide', Decorate]);

  function Decorate($provide) {
    $provide.decorator('uibTypeaheadPopup', function($delegate) {
      var directive = $delegate[0];

      directive.templateUrl = "popupOverride.tpl.html";

      return $delegate;
    });
  }

I also considered extending the NgbTypeahead class, but the _windowRef variable is private so I am unable to override the ComponentRef.

Source: ng-bootstrap/ng-bootstrap