{{ overviewIntro }}

{{ syncedMenuTitle }}

{{ syncedMenuBody }}

{{ activeNowLabel }}: {{ activeSection }}

{{ observedContainerTitle }}

{{ observedContainerBody }}

{{ overviewLabel }}

{{ basicServiceTitle }}

{{ basicServiceBody1 }}

{{ basicServiceBody2 }}

{{ serviceLabel }}

{{ imperativeApiTitle }}

{{ imperativeApiBody1 }}

{{ imperativeApiBody2 }}

{{ directiveLabel }}

{{ directiveSugarTitle }}

{{ directiveSugarBody1 }}

{{ directiveSugarBody2 }}

{{ itemsLabel }}

{{ highlightingTitle }}

{{ highlightingBody1 }}

{{ highlightingBody2 }}

{{ customizationLabel }}

{{ customizationLabel }}

{{ customizationBody1 }}

{{ customizationBody2 }}

{{ apiIntro }}

{{ item }}

<nav [liScrollSpyMenu]="spy" class="nav nav-pills flex-column">
  <button class="nav-link" type="button" liScrollSpyItem="overview">Overview</button>
  <button class="nav-link" type="button" [liScrollSpyItem]="[spy, 'items', 'directive']">Items</button>
</nav>

<div liScrollSpy #spy="liScrollSpy" (activeChange)="onActiveChange($event)">
  <section liScrollSpyFragment="overview">...</section>
  <section liScrollSpyFragment="service">...</section>
  <section liScrollSpyFragment="directive">...</section>
</div>