fix(module:all): fix enableIvy:false with ng-zorro-antd (#5081)

close #5070

components/avatar/avatar.component.ts

@@ -34,7 +34,13 @@ const NZ_CONFIG_COMPONENT_NAME = 'avatar';
     <span class="ant-avatar-string" #textEl [ngStyle]="textStyles" *ngIf="nzText && hasText">{{ nzText }}</span>
   `,
   host: {
-    '[class]': 'classMap',
+    '[class.ant-avatar]': 'true',
+    '[class.ant-avatar-lg]': `nzSize === 'large'`,
+    '[class.ant-avatar-sm]': `nzSize === 'small'`,
+    '[class.ant-avatar-square]': `nzShape === 'square'`,
+    '[class.ant-avatar-circle]': `nzShape === 'circle'`,
+    '[class.ant-avatar-icon]': `nzIcon`,
+    '[class.ant-avatar-image]': `hasSrc `,
     '[style.width]': 'customSize',
     '[style.height]': 'customSize',
     '[style.line-height]': 'customSize',
@@ -58,7 +64,6 @@ export class NzAvatarComponent implements OnChanges {
   hasSrc: boolean = true;
   hasIcon: boolean = false;
   textStyles: {};
-  classMap: {};
   customSize: string | null = null;
 
   @ViewChild('textEl', { static: false }) textEl: ElementRef;
@@ -72,18 +77,6 @@ export class NzAvatarComponent implements OnChanges {
     private platform: Platform
   ) {}
 
-  setClass(): void {
-    this.classMap = {
-      ['ant-avatar']: true,
-      [`ant-avatar-lg`]: this.nzSize === 'large',
-      [`ant-avatar-sm`]: this.nzSize === 'small',
-      [`ant-avatar-${this.nzShape}`]: this.nzShape,
-      [`ant-avatar-icon`]: this.nzIcon,
-      [`ant-avatar-image`]: this.hasSrc // downgrade after image error
-    };
-    this.cdr.detectChanges();
-  }
-
   imgError($event: Event): void {
     this.nzError.emit($event);
     if (!$event.defaultPrevented) {
@@ -95,7 +88,7 @@ export class NzAvatarComponent implements OnChanges {
       } else if (this.nzText) {
         this.hasText = true;
       }
-      this.setClass();
+      this.cdr.detectChanges();
       this.setSizeStyle();
       this.notifyCalc();
     }
@@ -106,7 +99,6 @@ export class NzAvatarComponent implements OnChanges {
     this.hasIcon = !this.nzSrc && !!this.nzIcon;
     this.hasSrc = !!this.nzSrc;
 
-    this.setClass();
     this.setSizeStyle();
     this.notifyCalc();
   }

components/card/card-loading.component.ts

@@ -14,7 +14,7 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
   template: `
     <div class="ant-card-loading-content">
       <div class="ant-row" style="margin-left: -4px; margin-right: -4px;" *ngFor="let listOfClassName of listOfLoading">
-        <div *ngFor="let className of listOfClassName" [class]="className" style="padding-left: 4px; padding-right: 4px;">
+        <div *ngFor="let className of listOfClassName" [ngClass]="className" style="padding-left: 4px; padding-right: 4px;">
           <div class="ant-card-loading-block"></div>
         </div>
       </div>

components/date-picker/date-picker.component.html

@@ -10,7 +10,7 @@
   [placeholder]="nzPlaceHolder"
   [ngClass]="nzClassName"
   style="display: inherit; align-items: center; width: 100%;"
-  [style]="nzStyle"
+  [ngStyle]="nzStyle"
   [dropdownClassName]="nzDropdownClassName"
   [popupStyle]="nzPopupStyle"
   [noAnimation]="noAnimation?.nzNoAnimation"

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

@@ -10,6 +10,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  ElementRef,
   EventEmitter,
   forwardRef,
   Host,
@@ -19,6 +20,7 @@ import {
   OnInit,
   Optional,
   Output,
+  Renderer2,
   SimpleChanges,
   TemplateRef,
   ViewChild,
@@ -50,7 +52,11 @@ const POPUP_STYLE_PATCH = { position: 'relative' }; // Aim to override antd's st
   exportAs: 'nzDatePicker',
   templateUrl: './date-picker.component.html',
   host: {
-    '[class]': 'hostClassMap'
+    '[class.ant-picker]': `true`,
+    '[class.ant-picker-range]': `isRange`,
+    '[class.ant-picker-large]': `nzSize === 'large'`,
+    '[class.ant-picker-small]': `nzSize === 'small'`,
+    '[class.ant-picker-disabled]': `nzDisabled`
   },
   providers: [
     DatePickerService,
@@ -73,7 +79,6 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
   showWeek: boolean = false; // Should show as week picker
   focused: boolean = false;
   extraFooter: TemplateRef<void> | string;
-  hostClassMap = {};
 
   protected destroyed$: Subject<void> = new Subject();
   protected isCustomPlaceHolder: boolean = false;
@@ -127,21 +132,12 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
     return this.picker.animationOpenState;
   } // Use picker's real open state to let re-render the picker's content when shown up
 
-  updateHostClass(): void {
-    this.hostClassMap = {
-      [`ant-picker`]: true,
-      [`ant-picker-range`]: this.isRange,
-      [`ant-picker-large`]: this.nzSize === 'large',
-      [`ant-picker-small`]: this.nzSize === 'small',
-      [`ant-picker-focused`]: this.focused,
-      [`ant-picker-disabled`]: this.nzDisabled
-    };
-  }
-
   constructor(
     public datePickerService: DatePickerService,
     protected i18n: NzI18nService,
     protected cdr: ChangeDetectorRef,
+    private renderer: Renderer2,
+    private elementRef: ElementRef,
     protected dateHelper: DateHelperService,
     @Host() @Optional() public noAnimation?: NzNoAnimationDirective
   ) {}
@@ -177,7 +173,6 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
       this.picker.hideOverlay();
     });
 
-    this.updateHostClass();
     // Default format when it's empty
     if (!this.nzFormat) {
       if (this.showWeek) {
@@ -189,10 +184,6 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.nzSize || changes.nzDisabled) {
-      this.updateHostClass();
-    }
-
     if (changes.nzPopupStyle) {
       // Always assign the popup style patch
       this.nzPopupStyle = this.nzPopupStyle ? { ...this.nzPopupStyle, ...POPUP_STYLE_PATCH } : POPUP_STYLE_PATCH;
@@ -300,7 +291,12 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
 
   onFocusChange(value: boolean): void {
     this.focused = value;
-    this.updateHostClass();
+    // TODO: avoid autoFocus cause change after checked error
+    if (this.focused) {
+      this.renderer.addClass(this.elementRef.nativeElement, 'ant-picker-focused');
+    } else {
+      this.renderer.removeClass(this.elementRef.nativeElement, 'ant-picker-focused');
+    }
   }
 
   onPanelModeChange(panelMode: PanelMode | PanelMode[]): void {

components/drawer/drawer.module.ts

@@ -21,6 +21,7 @@ import { NzDrawerServiceModule } from './drawer.service.module';
 @NgModule({
   imports: [CommonModule, OverlayModule, PortalModule, NzIconModule, NzOutletModule, NzNoAnimationModule, NzDrawerServiceModule],
   exports: [NzDrawerComponent],
-  declarations: [NzDrawerComponent]
+  declarations: [NzDrawerComponent],
+  entryComponents: [NzDrawerComponent]
 })
 export class NzDrawerModule {}

components/dropdown/dropdown-menu.component.ts

@@ -44,7 +44,7 @@ export type NzPlacementType = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 't
     <ng-template>
       <div
         class="ant-dropdown"
-        [class]="nzOverlayClassName"
+        [ngClass]="nzOverlayClassName"
         [ngStyle]="nzOverlayStyle"
         [@slideMotion]="dropDownPosition"
         [@.disabled]="noAnimation?.nzNoAnimation"

components/dropdown/dropdown.module.ts

@@ -37,6 +37,7 @@ import { NzDropDownDirective } from './dropdown.directive';
     NzContextMenuServiceModule,
     NzOutletModule
   ],
+  entryComponents: [NzDropdownMenuComponent],
   declarations: [NzDropDownDirective, NzDropDownADirective, NzDropdownMenuComponent, NzDropdownButtonDirective],
   exports: [NzMenuModule, NzDropDownDirective, NzDropDownADirective, NzDropdownMenuComponent, NzDropdownButtonDirective]
 })

components/form/form.directive.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChange, SimpleChanges } from '@angular/core';
+import { Directive, ElementRef, Input, OnChanges, OnDestroy, Renderer2, SimpleChange, SimpleChanges } from '@angular/core';
 
 import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { BooleanInput, InputObservable } from 'ng-zorro-antd/core/types';
@@ -19,28 +19,24 @@ const NZ_CONFIG_COMPONENT_NAME = 'form';
 @Directive({
   selector: '[nz-form]',
   exportAs: 'nzForm',
-  host: { '[class]': 'hostClassMap' }
+  host: {
+    '[class.ant-form-horizontal]': `nzLayout === 'horizontal'`,
+    '[class.ant-form-vertical]': `nzLayout === 'vertical'`,
+    '[class.ant-form-inline]': `nzLayout === 'inline'`
+  }
 })
-export class NzFormDirective implements OnInit, OnChanges, OnDestroy, InputObservable {
+export class NzFormDirective implements OnChanges, OnDestroy, InputObservable {
   static ngAcceptInputType_nzNoColon: BooleanInput;
   static ngAcceptInputType_nzDisableAutoTips: BooleanInput;
 
-  @Input() nzLayout = 'horizontal';
+  @Input() nzLayout: 'horizontal' | 'vertical' | 'inline' = 'horizontal';
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) @InputBoolean() nzNoColon: boolean;
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME, {}) nzAutoTips: Record<string, Record<string, string>>;
   @Input() @InputBoolean() nzDisableAutoTips = false;
 
-  hostClassMap = {};
-
   destroy$ = new Subject();
   private inputChanges$ = new Subject<SimpleChanges>();
 
-  setClassMap(): void {
-    this.hostClassMap = {
-      [`ant-form-${this.nzLayout}`]: this.nzLayout
-    };
-  }
-
   getInputObservable<K extends keyof this>(changeType: K): Observable<SimpleChange> {
     return this.inputChanges$.pipe(
       filter(changes => changeType in changes),
@@ -52,15 +48,7 @@ export class NzFormDirective implements OnInit, OnChanges, OnDestroy, InputObser
     this.renderer.addClass(elementRef.nativeElement, 'ant-form');
   }
 
-  ngOnInit(): void {
-    this.setClassMap();
-  }
-
   ngOnChanges(changes: SimpleChanges): void {
-    const { nzLayout } = changes;
-    if (nzLayout) {
-      this.setClassMap();
-    }
     this.inputChanges$.next(changes);
   }
 

components/grid/col.directive.ts

@@ -19,7 +19,7 @@ import {
   Renderer2,
   SimpleChanges
 } from '@angular/core';
-import { IndexableObject, NgClassInterface } from 'ng-zorro-antd/core/types';
+import { NgClassInterface } from 'ng-zorro-antd/core/types';
 import { isNotNil } from 'ng-zorro-antd/core/util';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -37,13 +37,12 @@ export interface EmbeddedProperty {
   selector: '[nz-col],nz-col,nz-form-control,nz-form-label',
   exportAs: 'nzCol',
   host: {
-    '[class]': 'hostClassMap',
     '[style.flex]': 'hostFlexStyle'
   }
 })
 export class NzColDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+  private classMap: { [key: string]: boolean } = {};
   private destroy$ = new Subject();
-  hostClassMap: IndexableObject = {};
   hostFlexStyle: string | null = null;
   @Input() nzFlex: string | number | null = null;
   @Input() nzSpan: number | null = null;
@@ -59,7 +58,7 @@ export class NzColDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
   @Input() nzXXl: number | EmbeddedProperty | null = null;
 
   setHostClassMap(): void {
-    this.hostClassMap = {
+    const hostClassMap = {
       ['ant-col']: true,
       [`ant-col-${this.nzSpan}`]: isNotNil(this.nzSpan),
       [`ant-col-order-${this.nzOrder}`]: isNotNil(this.nzOrder),
@@ -68,6 +67,17 @@ export class NzColDirective implements OnInit, OnChanges, AfterViewInit, OnDestr
       [`ant-col-push-${this.nzPush}`]: isNotNil(this.nzPush),
       ...this.generateClass()
     };
+    for (const i in this.classMap) {
+      if (this.classMap.hasOwnProperty(i)) {
+        this.renderer.removeClass(this.elementRef.nativeElement, i);
+      }
+    }
+    this.classMap = { ...hostClassMap };
+    for (const i in this.classMap) {
+      if (this.classMap.hasOwnProperty(i) && this.classMap[i]) {
+        this.renderer.addClass(this.elementRef.nativeElement, i);
+      }
+    }
   }
 
   setHostFlexStyle(): void {

components/icon/icon.directive.ts

@@ -16,11 +16,11 @@ import { NzIconPatchService, NzIconService } from './icon.service';
   selector: '[nz-icon]',
   exportAs: 'nzIcon',
   host: {
-    '[class.anticon]': 'true',
-    '[class]': 'hostClass'
+    '[class.anticon]': 'true'
   }
 })
 export class NzIconDirective extends IconDirective implements OnInit, OnChanges, AfterContentChecked {
+  cacheClassName: string | null = null;
   @Input()
   @InputBoolean()
   set nzSpin(value: boolean) {
@@ -140,7 +140,11 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
   }
 
   private setClassName(): void {
-    this.hostClass = `anticon-${this.type}`;
+    if (this.cacheClassName) {
+      this.renderer.removeClass(this.el, this.cacheClassName);
+    }
+    this.cacheClassName = `anticon-${this.type}`;
+    this.renderer.addClass(this.el, this.cacheClassName);
   }
 
   private setSVGData(svg: SVGElement): void {