Badge Popovers

component.ts

// ...
  public badgeOptions: IBadge[] = [
    new Badge('Corgi', 'badge-primary', 'God save the queen and her dogs', null, {name: 'Stumpy'}),
    new Badge('Shiba Inu', 'badge-default', 'Dogs raised on sushi still don\'t use chopsticks', null, {name: 'Doge'}),
    new Badge('Pug', 'badge-danger', 'Your scientists were so preoccupied with whether or not they could...', null, {name: 'Snorelax'}),
    new Badge('King Charles Spaniel', 'badge-success', '"Derp derp derp" is what the toy cavalier says', null, {name: 'Chuck'}),
    new Badge('Great Dane', 'badge-info', 'Hip replacement surgery insurance recommended', null, {name: 'Scooby'}),
    new Badge('French Bulldog', 'badge-warning', 'A wine, a kiss, and a bulldog walk into a bar...', null, {name: 'Napoleon'})
  ];

  public activeBadge: IBadge;
// ...

template.html

<badge-list
    [maxCharacters]="badgeCharacterLimit"
    [showInline]="true"
    [popoverTemplate]="badgePopover"
    [options]="badgeOptions"
    (selected$)="activeBadge = $event">
</badge-list>

<ng-template #badgePopover>
  <ng-container *ngIf="activeBadge">
    <dl class="spec-list--p">
      <dt class="p-0">Breed</dt><dd class="pl-0 mb-1">{{activeBadge.label}}</dd>
      <dt class="p-0">Name</dt><dd class="pl-0 mb-1">{{activeBadge.context.name}}</dd>
      <dt class="p-0">Description</dt><dd class="pl-0 mb-1">{{activeBadge.tooltipText}}</dd>
    </dl>
  </ng-container>
</ng-template>