fix: type errors with strictTemplates

close NG-ZORRO#5171

components/auto-complete/demo/basic.ts

@@ -5,7 +5,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
   encapsulation: ViewEncapsulation.None,
   template: `
     <div class="example-input">
-      <input placeholder="input here" nz-input [(ngModel)]="inputValue" (input)="onInput($event.target?.value)" [nzAutocomplete]="auto" />
+      <input placeholder="input here" nz-input [(ngModel)]="inputValue" (input)="onInput($event)" [nzAutocomplete]="auto" />
       <nz-autocomplete [nzDataSource]="options" nzBackfill #auto></nz-autocomplete>
     </div>
   `
@@ -14,7 +14,8 @@ export class NzDemoAutoCompleteBasicComponent {
   inputValue?: string;
   options: string[] = [];
 
-  onInput(value: string): void {
+  onInput(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
     this.options = value ? [value, value + value, value + value + value] : [];
   }
 }

components/auto-complete/demo/custom.ts

@@ -10,7 +10,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
         nz-input
         row="4"
         [(ngModel)]="inputValue"
-        (input)="onInput($event.target?.value)"
+        (input)="onInput($event)"
         [nzAutocomplete]="auto"
       ></textarea>
       <nz-autocomplete #auto>
@@ -23,7 +23,8 @@ export class NzDemoAutoCompleteCustomComponent {
   inputValue?: string;
   options: string[] = [];
 
-  onInput(value: string): void {
+  onInput(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
     this.options = value ? [value, value + value, value + value + value] : [];
   }
 }

components/button/demo/size.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NzButtonSize } from 'ng-zorro-antd/button';
 
 @Component({
   selector: 'nz-demo-button-size',
@@ -40,5 +41,5 @@ import { Component } from '@angular/core';
   ]
 })
 export class NzDemoButtonSizeComponent {
-  size = 'large';
+  size: NzButtonSize = 'large';
 }

components/calendar/calendar.component.ts

@@ -32,7 +32,7 @@ import {
   NzMonthFullCellDirective as MonthFullCell
 } from './calendar-cells';
 
-type NzCalendarMode = 'month' | 'year';
+export type NzCalendarMode = 'month' | 'year';
 type NzCalendarDateTemplate = TemplateRef<{ $implicit: Date }>;
 
 @Component({

components/calendar/demo/basic.ts

@@ -1,14 +1,13 @@
 import { Component } from '@angular/core';
+import { NzCalendarMode } from 'ng-zorro-antd/calendar';
 
 @Component({
   selector: 'nz-demo-calendar-basic',
-  template: `
-    <nz-calendar [(ngModel)]="date" [(nzMode)]="mode" (nzPanelChange)="panelChange($event)"></nz-calendar>
-  `
+  template: ` <nz-calendar [(ngModel)]="date" [(nzMode)]="mode" (nzPanelChange)="panelChange($event)"></nz-calendar> `
 })
 export class NzDemoCalendarBasicComponent {
   date = new Date(2012, 11, 21);
-  mode = 'month';
+  mode: NzCalendarMode = 'month';
 
   panelChange(change: { date: Date; mode: string }): void {
     console.log(change.date, change.mode);

components/cascader/cascader.component.ts

@@ -224,7 +224,7 @@ export class NzCascaderComponent implements NzCascaderComponentAsSource, OnInit,
   @Input() nzMouseLeaveDelay: number = 150; // ms
   @Input() nzTriggerAction: NzCascaderTriggerType | NzCascaderTriggerType[] = ['click'] as NzCascaderTriggerType[];
   @Input() nzChangeOn?: (option: NzCascaderOption, level: number) => boolean;
-  @Input() nzLoadData?: (node: NzCascaderOption, index?: number) => PromiseLike<NzSafeAny>;
+  @Input() nzLoadData?: (node: NzCascaderOption, index: number) => PromiseLike<NzSafeAny>;
 
   @Input()
   get nzOptions(): NzCascaderOption[] | null {

components/cascader/demo/default-value-and-lazyload.ts

@@ -51,9 +51,7 @@ const scenicspots: { [key: string]: Array<{ value: string; label: string; isLeaf
 
 @Component({
   selector: 'nz-demo-cascader-default-value-and-lazyload',
-  template: `
-    <nz-cascader [(ngModel)]="values" [nzLoadData]="loadData" (ngModelChange)="onChanges($event)"> </nz-cascader>
-  `
+  template: ` <nz-cascader [(ngModel)]="values" [nzLoadData]="loadData" (ngModelChange)="onChanges($event)"> </nz-cascader> `
 })
 export class NzDemoCascaderDefaultValueAndLazyloadComponent {
   values: string[] = ['zhejiang', 'hangzhou', 'xihu'];

components/cascader/typings.ts

@@ -63,5 +63,5 @@ export interface NzCascaderComponentAsSource {
 
   nzChangeOn?(option: NzCascaderOption, level: number): boolean;
 
-  nzLoadData?(node: NzCascaderOption, index?: number): PromiseLike<NzSafeAny>;
+  nzLoadData?(node: NzCascaderOption, index: number): PromiseLike<NzSafeAny>;
 }

components/code-editor/demo/full-control.ts

@@ -6,9 +6,7 @@ declare const monaco: any;
 
 @Component({
   selector: 'nz-demo-code-editor-full-control',
-  template: `
-    <nz-code-editor class="editor" [nzFullControl]="true" (nzEditorInitialized)="onEditorInit($event)"></nz-code-editor>
-  `,
+  template: ` <nz-code-editor class="editor" [nzFullControl]="true" (nzEditorInitialized)="onEditorInit($event)"></nz-code-editor> `,
   styles: [
     `
       .editor {
@@ -18,14 +16,14 @@ declare const monaco: any;
   ]
 })
 export class NzDemoCodeEditorFullControlComponent {
-  editor?: editor.ICodeEditor;
+  editor?: editor.ICodeEditor | editor.IEditor;
 
   code = `import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor'
 
 @Component({})
 export class SomeComponent {}`;
 
-  onEditorInit(e: editor.ICodeEditor): void {
+  onEditorInit(e: editor.ICodeEditor | editor.IEditor): void {
     this.editor = e;
     this.editor.setModel(monaco.editor.createModel("console.log('Hello ng-zorro-antd')", 'typescript'));
   }

components/collapse/demo/custom.ts

@@ -10,7 +10,7 @@ import { Component } from '@angular/core';
         [nzHeader]="panel.name"
         [nzActive]="panel.active"
         [ngStyle]="panel.customStyle"
-        [nzExpandedIcon]="!isFirst && (panel.icon || expandedIcon)"
+        [nzExpandedIcon]="!isFirst ? panel.icon || expandedIcon : undefined"
       >
         <p>{{ panel.name }} content</p>
         <ng-template #expandedIcon let-active>

components/collapse/demo/noarrow.ts

@@ -4,13 +4,7 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-collapse-noarrow',
   template: `
     <nz-collapse>
-      <nz-collapse-panel
-        *ngFor="let panel of panels"
-        [nzHeader]="panel.name"
-        [nzActive]="panel.active"
-        [nzDisabled]="panel.disabled"
-        [nzShowArrow]="panel.arrow"
-      >
+      <nz-collapse-panel *ngFor="let panel of panels" [nzHeader]="panel.name" [nzActive]="panel.active" [nzShowArrow]="panel.arrow">
         <p style="margin:0;">
           A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many
           households across the world.

components/core/util/convert.ts

@@ -30,8 +30,8 @@ export function toCssPixel(value: number | string): string {
 /**
  * Get the function-property type's value
  */
-export function valueFunctionProp<T>(prop: FunctionProp<T>, ...args: NzSafeAny[]): T {
-  return typeof prop === 'function' ? prop(...args) : prop;
+export function valueFunctionProp<T>(prop: FunctionProp<T> | T, ...args: NzSafeAny[]): T {
+  return typeof prop === 'function' ? (prop as FunctionProp<T>)(...args) : prop;
 }
 
 function propDecoratorFactory<T, D>(name: string, fallback: (v: T) => D): (target: NzSafeAny, propName: string) => void {

components/date-picker/date-picker.component.ts

@@ -39,7 +39,7 @@ import { DatePickerService } from './date-picker.service';
 
 import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzPickerComponent } from './picker.component';
-import { CompatibleDate, DisabledTimeFn, PanelMode, PresetRanges, SupportTimeOptions } from './standard-types';
+import { CompatibleDate, DisabledTimeFn, NzDateMode, PresetRanges, SupportTimeOptions } from './standard-types';
 
 const POPUP_STYLE_PATCH = { position: 'relative' }; // Aim to override antd's style to support overlay's position strategy (position:absolute will cause it not working beacuse the overlay can't get the height/width of it's content)
 const NZ_CONFIG_COMPONENT_NAME = 'datePicker';
@@ -118,12 +118,13 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
   static ngAcceptInputType_nzDisabled: BooleanInput;
   static ngAcceptInputType_nzOpen: BooleanInput;
   static ngAcceptInputType_nzShowToday: BooleanInput;
-  static ngAcceptInputType_nzShowTime: BooleanInput;
+  static ngAcceptInputType_nzMode: NzDateMode | NzDateMode[] | string | string[] | null | undefined;
+  static ngAcceptInputType_nzShowTime: BooleanInput | SupportTimeOptions | null | undefined;
 
   isRange: boolean = false; // Indicate whether the value is a range value
   showWeek: boolean = false; // Should show as week picker
   focused: boolean = false;
-  extraFooter?: TemplateRef<void> | string;
+  extraFooter?: TemplateRef<NzSafeAny> | string;
   hostClassMap: NgClassInterface = {};
 
   protected destroyed$: Subject<void> = new Subject();
@@ -144,23 +145,24 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
   @Input() nzPlaceHolder: string | [string, string] = '';
   @Input() nzPopupStyle: object = POPUP_STYLE_PATCH;
   @Input() nzDropdownClassName?: string;
-  @Input() nzSize?: 'large' | 'small';
+  @Input() nzSize: 'large' | 'small' | 'default' = 'default';
   /**
    * @deprecated 10.0.0. This is deprecated and going to be removed in 10.0.0.
    */
   @Input() nzStyle: object | null = null;
   @Input() nzFormat!: string;
-  @Input() nzDateRender?: FunctionProp<TemplateRef<Date> | string>;
+  @Input() nzDateRender?: TemplateRef<NzSafeAny> | string | FunctionProp<TemplateRef<Date> | string>;
   @Input() nzDisabledTime?: DisabledTimeFn;
-  @Input() nzRenderExtraFooter?: FunctionProp<TemplateRef<void> | string>;
+  @Input() nzRenderExtraFooter?: TemplateRef<NzSafeAny> | string | FunctionProp<TemplateRef<NzSafeAny> | string>;
   @Input() @InputBoolean() nzShowToday: boolean = true;
-  @Input() nzMode: PanelMode | PanelMode[] = 'date';
+  @Input() nzMode: NzDateMode | NzDateMode[] = 'date';
   @Input() nzRanges?: PresetRanges;
   @Input() nzDefaultPickerValue: CompatibleDate | null = null;
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) nzSeparator?: string = undefined;
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) nzSuffixIcon: string | TemplateRef<NzSafeAny> = 'calendar';
 
-  @Output() readonly nzOnPanelChange = new EventEmitter<PanelMode | PanelMode[]>();
+  // TODO(@wenqi73) The PanelMode need named for each pickers and export
+  @Output() readonly nzOnPanelChange = new EventEmitter<NzDateMode | NzDateMode[] | string | string[]>();
   @Output() readonly nzOnCalendarChange = new EventEmitter<Array<Date | null>>();
   @Output() readonly nzOnOk = new EventEmitter<CompatibleDate | null>();
   @Output() readonly nzOnOpenChange = new EventEmitter<boolean>();
@@ -352,7 +354,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
     }
   }
 
-  onPanelModeChange(panelMode: PanelMode | PanelMode[]): void {
+  onPanelModeChange(panelMode: NzDateMode | NzDateMode[]): void {
     // this.nzMode = panelMode;
     this.nzOnPanelChange.emit(panelMode);
   }

components/date-picker/date-range-popup.component.ts

@@ -32,7 +32,7 @@ import {
   DisabledDateFn,
   DisabledTimeFn,
   DisabledTimePartial,
-  PanelMode,
+  NzDateMode,
   PresetRanges,
   RangePartType,
   SupportTimeOptions
@@ -144,15 +144,15 @@ export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
   @Input() showTime!: SupportTimeOptions | boolean;
   @Input() extraFooter?: TemplateRef<void> | string;
   @Input() ranges?: PresetRanges;
-  @Input() dateRender?: FunctionProp<TemplateRef<Date> | string>;
-  @Input() panelMode!: PanelMode | PanelMode[];
+  @Input() dateRender?: string | TemplateRef<Date> | FunctionProp<TemplateRef<Date> | string>;
+  @Input() panelMode!: NzDateMode | NzDateMode[];
   @Input() defaultPickerValue!: CompatibleDate | undefined | null;
-  @Output() readonly panelModeChange = new EventEmitter<PanelMode | PanelMode[]>();
+  @Output() readonly panelModeChange = new EventEmitter<NzDateMode | NzDateMode[]>();
   @Output() readonly calendarChange = new EventEmitter<CompatibleValue>();
   @Output() readonly resultOk = new EventEmitter<void>(); // Emitted when done with date selecting
 
   prefixCls: string = PREFIX_CLASS;
-  endPanelMode: PanelMode | PanelMode[] = 'date';
+  endPanelMode: NzDateMode | NzDateMode[] = 'date';
   timeOptions: SupportTimeOptions | SupportTimeOptions[] | null = null;
   hoverValue: SingleValue[] = []; // Range ONLY
   destroy$ = new Subject();
@@ -231,13 +231,13 @@ export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
-  onPanelModeChange(mode: PanelMode, partType?: RangePartType): void {
+  onPanelModeChange(mode: NzDateMode, partType?: RangePartType): void {
     if (this.isRange) {
       const index = this.datePickerService.getActiveIndex(partType);
       if (index === 0) {
-        this.panelMode = [mode, this.panelMode[1]] as PanelMode[];
+        this.panelMode = [mode, this.panelMode[1]] as NzDateMode[];
       } else {
-        this.panelMode = [this.panelMode[0], mode] as PanelMode[];
+        this.panelMode = [this.panelMode[0], mode] as NzDateMode[];
       }
     } else {
       this.panelMode = mode;
@@ -319,11 +319,11 @@ export class DateRangePopupComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
-  getPanelMode(panelMode: PanelMode | PanelMode[], partType?: RangePartType): PanelMode {
+  getPanelMode(panelMode: NzDateMode | NzDateMode[], partType?: RangePartType): NzDateMode {
     if (this.isRange) {
-      return panelMode[this.datePickerService.getActiveIndex(partType)] as PanelMode;
+      return panelMode[this.datePickerService.getActiveIndex(partType)] as NzDateMode;
     } else {
-      return panelMode as PanelMode;
+      return panelMode as NzDateMode;
     }
   }
 

components/date-picker/demo/mode.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NzDateMode } from 'ng-zorro-antd/date-picker';
 
 @Component({
   selector: 'nz-demo-date-picker-mode',
@@ -23,15 +24,15 @@ import { Component } from '@angular/core';
   ]
 })
 export class NzDemoDatePickerModeComponent {
-  dateMode = 'time';
+  dateMode: NzDateMode = 'time';
 
   handleDateOpenChange(open: boolean): void {
     if (open) {
       this.dateMode = 'time';
     }
   }
 
-  handleDatePanelChange(mode: string): void {
+  handleDatePanelChange(mode: string | NzDateMode[] | string[]): void {
     console.log('handleDatePanelChange: ', mode);
   }
 }

components/date-picker/demo/size.ts

@@ -29,5 +29,5 @@ import { Component } from '@angular/core';
   ]
 })
 export class NzDemoDatePickerSizeComponent {
-  size = 'default';
+  size: 'large' | 'small' | 'default' = 'default';
 }

components/date-picker/demo/time.ts

@@ -37,7 +37,7 @@ export class NzDemoDatePickerTimeComponent {
     console.log('Selected Time: ', result);
   }
 
-  onOk(result: Date): void {
+  onOk(result: Date | Date[] | null): void {
     console.log('onOk', result);
   }
 }

components/date-picker/inner-popup.component.ts

@@ -21,7 +21,7 @@ import {
 import { CandyDate } from 'ng-zorro-antd/core/time';
 import { FunctionProp } from 'ng-zorro-antd/core/types';
 import { NzCalendarI18nInterface } from 'ng-zorro-antd/i18n';
-import { DisabledDateFn, PanelMode, RangePartType, SupportTimeOptions } from './standard-types';
+import { DisabledDateFn, NzDateMode, RangePartType, SupportTimeOptions } from './standard-types';
 import { PREFIX_CLASS } from './util';
 
 @Component({
@@ -155,20 +155,20 @@ import { PREFIX_CLASS } from './util';
 })
 export class InnerPopupComponent implements OnChanges {
   @Input() activeDate!: CandyDate;
-  @Input() endPanelMode!: PanelMode;
-  @Input() panelMode!: PanelMode;
+  @Input() endPanelMode!: NzDateMode;
+  @Input() panelMode!: NzDateMode;
   @Input() showWeek!: boolean;
   @Input() locale!: NzCalendarI18nInterface;
   @Input() showTimePicker!: boolean;
   @Input() timeOptions!: SupportTimeOptions | null;
   @Input() disabledDate?: DisabledDateFn;
-  @Input() dateRender?: FunctionProp<TemplateRef<Date> | string>;
+  @Input() dateRender?: string | TemplateRef<Date> | FunctionProp<TemplateRef<Date> | string>;
   @Input() selectedValue!: CandyDate[]; // Range ONLY
   @Input() hoverValue!: CandyDate[]; // Range ONLY
   @Input() value!: CandyDate;
   @Input() partType!: RangePartType;
 
-  @Output() readonly panelModeChange = new EventEmitter<PanelMode>();
+  @Output() readonly panelModeChange = new EventEmitter<NzDateMode>();
 
   // TODO: name is not proper
   @Output() readonly headerChange = new EventEmitter<CandyDate>(); // Emitted when user changed the header's value
@@ -184,7 +184,7 @@ export class InnerPopupComponent implements OnChanges {
    * @param direction
    * @param panelMode
    */
-  enablePrevNext(direction: 'prev' | 'next', panelMode: PanelMode): boolean {
+  enablePrevNext(direction: 'prev' | 'next', panelMode: NzDateMode): boolean {
     if (
       !this.showTimePicker &&
       panelMode === this.endPanelMode &&