feat(typeahead): add footer to typeahead dropdown

[critchie]

I have a requirement in my current project where the typeahead dropdown has a "footer" that contains a link to View All Results. I've attached a mock-up (sorry for redaction, privacy and all).

The idea is simple in my case... click the link and it navigates to a page that displays all the search results using the term the user has typed up to that point. But the footer should be able to display any mark-up.

I would think the simplest out-of-the-box solution would be to add a typeaheadFooterTemplate and if present simply add a dropdown-divider and then add whatever is in the template.

Something like this maybe:

<template [ngIf]="isBs4">
    <div class="dropdown-menu" (mouseleave)="focusLost()">
        <template ngFor let-match let-i="index" [ngForOf]="matches">
            <h6 *ngIf="match.isHeader()" class="dropdown-header">{{match}}</h6>
            <div *ngIf="!match.isHeader() && !itemTemplate">
                <a href="#"
                    class="dropdown-item"
                    (click)="selectMatch(match, $event)"
                    (mouseenter)="selectActive(match)"
                    [class.active]="isActive(match)"
                    [innerHtml]="hightlight(match, query)">
                </a>
            </div>
            <div *ngIf="!match.isHeader() && itemTemplate">
                <a href="#"
                    class="dropdown-item"
                    (click)="selectMatch(match, $event)"
                    (mouseenter)="selectActive(match)"
                    [class.active]="isActive(match)">
                    <template [ngTemplateOutlet]="itemTemplate" [ngOutletContext]="{item: match.item, index: i}">
                    </template>
                 </a>
            </div>
        </template>
        <template>
            <div *ngIf="footerTemplate">
                <div class="dropdown-divider"></div>
                <template [ngTemplateOutlet]="footerTemplate" [ngOutletContext]="{item: match.item}">
                </template>
            </div>
        </template>
    </div>
</template>

[critchie]

BTW... I'm happy to give this a shot but I'm having trouble getting everything up and running on my machine.

[1-0-1]

The functionality is already there. If they get optionsListTemplate working so that you can actually select an item, this is possible using that. You would define your own drop down menu template which allows you to add a footer (or header) along with the list items.