<sky-data-manager>
  <div class="sky-margin-stacked-xs">
    <sky-data-manager-toolbar>
      <sky-data-manager-toolbar-primary-item>
        <button
          aria-label="New contact"
          class="sky-btn sky-btn-default"
          type="button"
        >
          <sky-icon icon="add" />
          New
        </button>
      </sky-data-manager-toolbar-primary-item>
    </sky-data-manager-toolbar>
  </div>
  <div class="sky-margin-stacked-sm">
    <sky-key-info layout="horizontal" class="sky-padding-horizontal-sm">
      <sky-key-info-value class="sky-font-display-4">
        {{ contacts.length }}
      </sky-key-info-value>
      <sky-key-info-label> Contacts </sky-key-info-label>
    </sky-key-info>
  </div>
  <sky-data-view skyAgGridDataManagerAdapter viewId="gridView">
    <sky-ag-grid-wrapper>
      <ag-grid-angular [gridOptions]="gridOptions" [rowData]="contacts" />
    </sky-ag-grid-wrapper>
  </sky-data-view>
</sky-data-manager>
