<kendo-listview
  [height]="400"
  [data]="notes$ | async"
  class="k-d-flex-overflow-auto"
  (scrollBottom)="loadMore()">
  <ng-template kendoListViewHeaderTemplate>
    <span title>Reminders</span>
  </ng-template>
  <ng-template kendoListViewItemTemplate let-dataItem="dataItem">
    <app-message-note [note]="dataItem"></app-message-note>
  </ng-template>
</kendo-listview>

@Component({
  selector: 'app-message-list',
  templateUrl: `./message-list.component.html`,
  styles: [
    `
      .k-d-flex-overflow-auto {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: auto;
      }
    `,
  ],
})
export class MessageListComponent implements OnInit {
  notes$: Observable<NoteDto[]>;

  constructor(private replyService: ReplyNoteService) {}

  ngOnInit(): void {
    this.notes$ = this.replyService.getUserNotesList();
  }

  loadMore() {
    console.log('loading...');
  }
}