title: angular 6 ng-bootstrap typeahead multiple column results
body: <p>In an Angular 6 project I have used ng-bootstrap to create a typeahead, which returns an array of objects.</p>
  
  <p>I would like to display the results in a multiple column format, with each column representing a property of the object.</p>
  
  <p>In AngularJS, I was able to achieve this using the Angular UI Bootstrap typeahead directive as so:</p>
  
  <pre><code>&lt;div class="typeahead-class"&gt;
      &lt;input id="slipInfoFilter" type="text" class="form-control input-sm" ng-model="vm.contractCertainty.SlipInfo" placeholder="Start typing to choose an Insured"
      typeahead="slipInfo as slipInfo.Insured.InsuredName for slipInfo in vm.getSlipInfos($viewValue)" typeahead-editable="false"
      typeahead-template-url="App/Features/ContractCertainty/SlipInfoList.html"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The template for the results was this:</p>
  
  <pre><code>&lt;a&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-xs-2"&gt;
          &lt;span ng-bind-html="match.model.Insured.InsuredName | typeaheadHighlight:query"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-1"&gt;
          &lt;span ng-bind-html="match.model.YearOfAccount"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-2"&gt;
          &lt;span ng-bind-html="match.model.Broker.BrokerName"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-1"&gt;
          &lt;span ng-bind-html="match.model.Cedant"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-2"&gt;
          &lt;span ng-bind-html="match.model.Layer"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-1"&gt;
          &lt;span ng-bind-html="match.model.Inception | date:'dd-MM-yyyy'"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-1"&gt;
          &lt;span ng-bind-html="match.model.LeadDisplay"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-1"&gt;
          &lt;span ng-bind-html="match.model.RiskStatus"&gt;&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>And the result looked like this:</p>
  
  <p><a href="https://i.stack.imgur.com/9eTkE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9eTkE.png" alt="Typeahead results"></a></p>
  
  <p>I have not been able to replicate this in Angular 6 / ng-bootstrap. I replaced the ng-bind-html directive in my template with the new innerHTML directive but to no avail.</p>
  
  <p>Here is my attempt so far:</p>
  
  <pre><code>&lt;ng-template #rt let-r="result" let-t="term"&gt;
  
  
  &lt;a&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-xs-3"&gt;
      &lt;span [innerHTML]="r.insured.name"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-3"&gt;
        &lt;span [innerHTML]="r.layer"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/ng-template&gt;
  
  &lt;div class="typeahead-class"&gt;
    &lt;input type="text" class="form-control" [class.is-invalid]="searchFailed" [(ngModel)]="dfRisk" [ngbTypeahead]="search" 
      placeholder="Find a risk" [resultTemplate]="rt" /&gt;
    &lt;span *ngIf="searching"&gt;Searching...&lt;/span&gt;
    &lt;div class="invalid-feedback" *ngIf="searchFailed"&gt;No risks could be found.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here the results I am unhappy with:</p>
  
  <p><a href="https://i.stack.imgur.com/juEXV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/juEXV.png" alt="New typeahead"></a></p>
  
  <p>I would appreciate any ideas.</p>