Initial commit for the Angular part. We are nowhere yet.

bookie/src/app/guest-book/guest-book-list/guest-book-list.component.ts

@@ -0,0 +1,58 @@
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import {GuestBookListDataSource} from './guest-book-list-datasource';
+import {ActivatedRoute} from "@angular/router";
+import {FormBuilder, FormGroup} from "@angular/forms";
+import {debounceTime, distinctUntilChanged, map} from "rxjs/operators";
+import {GuestBook} from "../guest-book";
+import {Observable} from "rxjs";
+import * as moment from 'moment';
+import {GuestBookService} from "../guest-book.service";
+
+@Component({
+  selector: 'app-guest-book-list',
+  templateUrl: './guest-book-list.component.html',
+  styleUrls: ['./guest-book-list.component.css']
+})
+export class GuestBookListComponent implements OnInit {
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  dataSource: GuestBookListDataSource;
+  filter: Observable<string>;
+  form: FormGroup;
+  list: GuestBook[];
+  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+  displayedColumns = ['sno', 'name', 'phone', 'pax', 'action'];
+
+  constructor(private route: ActivatedRoute, private fb: FormBuilder, private ser: GuestBookService) {
+    this.createForm();
+    this.listenToDateChange();
+  }
+
+  createForm() {
+    this.form = this.fb.group({
+      date: ''
+    });
+  }
+
+  listenToDateChange(): void {
+    this.form.get('date').valueChanges.pipe(
+      map(x => moment(x).format('DD-MMM-YYYY'))
+    ).subscribe(x => {
+      return this.ser.list(x)
+        .subscribe((list: GuestBook[]) => {
+          this.list = list;
+          this.dataSource = new GuestBookListDataSource(this.paginator, this.sort, this.list);
+        });
+    });
+  }
+
+  ngOnInit() {
+    this.route.data
+      .subscribe((data: { list: GuestBook[] }) => {
+        this.list = data.list;
+      });
+    this.dataSource = new GuestBookListDataSource(this.paginator, this.sort, this.list);
+  }
+}