fix(material/schematics): generate code that works in strict CLI proj…

…ects (#22052)

* fix(material/schematics): generate code that works in strict CLI projects

- fix `strictNullChecks` errors
- fix `strictPropertyInitialization` errors
- default to smaller paginator rows so that paging works out of the box
- fix tslint errors from default CLI settings

Fixes #21981

* fix(cdk/schematics): generate code that works in strict CLI projects

- fix tslint error from default CLI settings

Relates to #21981

(cherry picked from commit 0441ae9)

src/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -30,7 +30,7 @@ export class <%= classify(name) %>Component {
     'Walk dog'
   ];
 
-  drop(event: CdkDragDrop<string[]>) {
+  drop(event: CdkDragDrop<string[]>): void {
     if (event.previousContainer === event.container) {
       moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
     } else {

src/material/schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -95,7 +95,7 @@ export class <%= classify(name) %>Component {
 
   constructor(private fb: FormBuilder) {}
 
-  onSubmit() {
+  onSubmit(): void {
     alert('Thanks!');
   }
 }

src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-datasource.ts.template

@@ -41,8 +41,8 @@ const EXAMPLE_DATA: <%= classify(name) %>Item[] = [
  */
 export class <%= classify(name) %>DataSource extends DataSource<<%= classify(name) %>Item> {
   data: <%= classify(name) %>Item[] = EXAMPLE_DATA;
-  paginator: MatPaginator;
-  sort: MatSort;
+  paginator: MatPaginator | undefined;
+  sort: MatSort | undefined;
 
   constructor() {
     super();
@@ -54,46 +54,49 @@ export class <%= classify(name) %>DataSource extends DataSource<<%= classify(nam
    * @returns A stream of the items to be rendered.
    */
   connect(): Observable<<%= classify(name) %>Item[]> {
-    // Combine everything that affects the rendered data into one update
-    // stream for the data-table to consume.
-    const dataMutations = [
-      observableOf(this.data),
-      this.paginator.page,
-      this.sort.sortChange
-    ];
-
-    return merge(...dataMutations).pipe(map(() => {
-      return this.getPagedData(this.getSortedData([...this.data]));
-    }));
+    if (this.paginator && this.sort) {
+      // Combine everything that affects the rendered data into one update
+      // stream for the data-table to consume.
+      return merge(observableOf(this.data), this.paginator.page, this.sort.sortChange)
+        .pipe(map(() => {
+          return this.getPagedData(this.getSortedData([...this.data ]));
+        }));
+    } else {
+      throw Error('Please set the paginator and sort on the data source before connecting.');
+    }
   }
 
   /**
    *  Called when the table is being destroyed. Use this function, to clean up
    * any open connections or free any held resources that were set up during connect.
    */
-  disconnect() {}
+  disconnect(): void {}
 
   /**
    * Paginate the data (client-side). If you're using server-side pagination,
    * this would be replaced by requesting the appropriate data from the server.
    */
-  private getPagedData(data: <%= classify(name) %>Item[]) {
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
+  private getPagedData(data: <%= classify(name) %>Item[]): <%= classify(name) %>Item[] {
+    if (this.paginator) {
+      const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
+      return data.splice(startIndex, this.paginator.pageSize);
+    } else {
+      return data;
+    }
   }
 
   /**
    * Sort the data (client-side). If you're using server-side sorting,
    * this would be replaced by requesting the appropriate data from the server.
    */
-  private getSortedData(data: <%= classify(name) %>Item[]) {
-    if (!this.sort.active || this.sort.direction === '') {
+  private getSortedData(data: <%= classify(name) %>Item[]): <%= classify(name) %>Item[] {
+    if (!this.sort || !this.sort.active || this.sort.direction === '') {
       return data;
     }
 
     return data.sort((a, b) => {
-      const isAsc = this.sort.direction === 'asc';
-      switch (this.sort.active) {
+      const isAsc = this.sort?.direction === 'asc';
+      switch (this.sort?.active) {
         case 'name': return compare(a.name, b.name, isAsc);
         case 'id': return compare(+a.id, +b.id, isAsc);
         default: return 0;
@@ -103,6 +106,6 @@ export class <%= classify(name) %>DataSource extends DataSource<<%= classify(nam
 }
 
 /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a: string | number, b: string | number, isAsc: boolean) {
+function compare(a: string | number, b: string | number, isAsc: boolean): number {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }

src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

@@ -17,9 +17,9 @@
   </table>
 
   <mat-paginator #paginator
-      [length]="dataSource?.data.length"
+      [length]="dataSource?.data?.length"
       [pageIndex]="0"
-      [pageSize]="50"
-      [pageSizeOptions]="[25, 50, 100, 250]">
+      [pageSize]="10"
+      [pageSizeOptions]="[5, 10, 20]">
   </mat-paginator>
 </div>

src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnInit, ViewChild<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
+import { AfterViewInit, Component, ViewChild<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTable } from '@angular/material/table';
@@ -17,20 +17,20 @@ import { <%= classify(name) %>DataSource, <%= classify(name) %>Item } from './<%
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
 })
-export class <%= classify(name) %>Component implements AfterViewInit, OnInit {
-  @ViewChild(MatPaginator) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
-  @ViewChild(MatTable) table: MatTable<<%= classify(name) %>Item>;
+export class <%= classify(name) %>Component implements AfterViewInit {
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild(MatTable) table!: MatTable<<%= classify(name) %>Item>;
   dataSource: <%= classify(name) %>DataSource;
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['id', 'name'];
 
-  ngOnInit() {
+  constructor() {
     this.dataSource = new <%= classify(name) %>DataSource();
   }
 
-  ngAfterViewInit() {
+  ngAfterViewInit(): void {
     this.dataSource.sort = this.sort;
     this.dataSource.paginator = this.paginator;
     this.table.dataSource = this.dataSource;

src/material/schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -58,27 +58,27 @@ export class <%= classify(name) %>Component {
   }
 
   /** Transform the data to something the tree can read. */
-  transformer(node: FileNode, level: number) {
+  transformer(node: FileNode, level: number): FlatTreeNode {
     return {
       name: node.name,
       type: node.type,
-      level: level,
+      level,
       expandable: !!node.children
     };
   }
 
   /** Get the level of the node */
-  getLevel(node: FlatTreeNode) {
+  getLevel(node: FlatTreeNode): number {
     return node.level;
   }
 
   /** Get whether the node is expanded or not. */
-  isExpandable(node: FlatTreeNode) {
+  isExpandable(node: FlatTreeNode): boolean {
     return node.expandable;
   }
 
   /** Get whether the node has children or not. */
-  hasChild(index: number, node: FlatTreeNode) {
+  hasChild(index: number, node: FlatTreeNode): boolean {
     return node.expandable;
   }