fix(module:*): fix rtl direction error

components/auto-complete/autocomplete.component.ts

@@ -16,6 +16,7 @@ import {
   Input,
   NgZone,
   OnDestroy,
+  OnInit,
   Optional,
   Output,
   QueryList,
@@ -82,7 +83,7 @@ export type AutocompleteDataSource = Array<AutocompleteDataSourceItem | string |
   `,
   animations: [slideMotion]
 })
-export class NzAutocompleteComponent implements AfterContentInit, AfterViewInit, OnDestroy {
+export class NzAutocompleteComponent implements AfterContentInit, AfterViewInit, OnDestroy, OnInit {
   static ngAcceptInputType_nzDefaultActiveFirstOption: BooleanInput;
   static ngAcceptInputType_nzBackfill: BooleanInput;
 
@@ -99,7 +100,7 @@ export class NzAutocompleteComponent implements AfterContentInit, AfterViewInit,
   showPanel: boolean = true;
   isOpen: boolean = false;
   activeItem!: NzAutocompleteOptionComponent;
-  dir: Direction;
+  dir: Direction = 'ltr';
   private destroy$ = new Subject<void>();
 
   /**
@@ -152,15 +153,16 @@ export class NzAutocompleteComponent implements AfterContentInit, AfterViewInit,
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private ngZone: NgZone,
-    @Optional() directionality: Directionality,
+    @Optional() private directionality: Directionality,
     @Host() @Optional() public noAnimation?: NzNoAnimationDirective
-  ) {
-    directionality.change?.pipe(takeUntil(this.destroy$)).subscribe(() => {
-      this.dir = directionality.value;
-      changeDetectorRef.detectChanges();
+  ) {}
+  ngOnInit(): void {
+    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
+      this.dir = direction;
+      this.changeDetectorRef.detectChanges();
     });
 
-    this.dir = directionality.value;
+    this.dir = this.directionality.value;
   }
 
   ngAfterContentInit(): void {

components/badge/badge.component.ts

@@ -12,6 +12,7 @@ import {
   Input,
   OnChanges,
   OnDestroy,
+  OnInit,
   Optional,
   Renderer2,
   SimpleChanges,
@@ -67,15 +68,15 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'badge';
     '[class.ant-badge-not-a-wrapper]': '!!(nzStandalone || nzStatus || nzColor)'
   }
 })
-export class NzBadgeComponent implements OnChanges, OnDestroy {
+export class NzBadgeComponent implements OnChanges, OnDestroy, OnInit {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
   static ngAcceptInputType_nzShowZero: BooleanInput;
   static ngAcceptInputType_nzShowDot: BooleanInput;
   static ngAcceptInputType_nzDot: BooleanInput;
   static ngAcceptInputType_nzStandalone: BooleanInput;
   showSup = false;
   presetColor: string | null = null;
-  dir: Direction;
+  dir: Direction = 'ltr';
   private destroy$ = new Subject<void>();
   @Input() @InputBoolean() nzShowZero: boolean = false;
   @Input() @InputBoolean() nzShowDot = true;
@@ -95,14 +96,15 @@ export class NzBadgeComponent implements OnChanges, OnDestroy {
     private renderer: Renderer2,
     private cdr: ChangeDetectorRef,
     private elementRef: ElementRef,
-    @Optional() directionality: Directionality
-  ) {
-    directionality.change?.pipe(takeUntil(this.destroy$)).subscribe(() => {
-      this.dir = directionality.value;
+    @Optional() private directionality: Directionality
+  ) {}
+  ngOnInit(): void {
+    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
+      this.dir = direction;
       this.prepareBadgeForRtl();
       this.cdr.detectChanges();
     });
-    this.dir = directionality.value;
+    this.dir = this.directionality.value;
     this.prepareBadgeForRtl();
   }
 

components/button/button-group.component.ts

@@ -12,7 +12,7 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { ChangeDetectionStrategy, Component, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnDestroy, OnInit, Optional, ViewEncapsulation } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -34,17 +34,18 @@ export type NzButtonGroupSize = 'large' | 'default' | 'small';
     <ng-content></ng-content>
   `
 })
-export class NzButtonGroupComponent implements OnDestroy {
+export class NzButtonGroupComponent implements OnDestroy, OnInit {
   @Input() nzSize: NzButtonGroupSize = 'default';
 
-  dir: Direction;
+  dir: Direction = 'ltr';
 
   private destroy$ = new Subject<void>();
 
-  constructor(directionality: Directionality) {
-    this.dir = directionality.value;
-    directionality.change?.pipe(takeUntil(this.destroy$)).subscribe(() => {
-      this.dir = directionality.value;
+  constructor(@Optional() private directionality: Directionality) {}
+  ngOnInit(): void {
+    this.dir = this.directionality.value;
+    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
+      this.dir = direction;
     });
   }
 

components/carousel/carousel.component.ts

@@ -19,6 +19,7 @@ import {
   Input,
   OnChanges,
   OnDestroy,
+  OnInit,
   Optional,
   Output,
   QueryList,
@@ -95,7 +96,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'carousel';
     '[class.ant-carousel-rtl]': `dir ==='rtl'`
   }
 })
-export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnDestroy, OnChanges {
+export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnDestroy, OnChanges, OnInit {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
   static ngAcceptInputType_nzEnableSwipe: BooleanInput;
   static ngAcceptInputType_nzDots: BooleanInput;
@@ -144,7 +145,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
   strategy?: NzCarouselBaseStrategy;
   vertical = false;
   transitionInProgress: number | null = null;
-  dir: Direction;
+  dir: Direction = 'ltr';
 
   private destroy$ = new Subject<void>();
   private gestureRect: ClientRect | null = null;
@@ -160,17 +161,18 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
     private readonly platform: Platform,
     private readonly resizeService: NzResizeService,
     private readonly nzDragService: NzDragService,
-    directionality: Directionality,
+    @Optional() private directionality: Directionality,
     @Optional() @Inject(NZ_CAROUSEL_CUSTOM_STRATEGIES) private customStrategies: NzCarouselStrategyRegistryItem[]
   ) {
     this.nzDotPosition = 'bottom';
 
     this.renderer.addClass(elementRef.nativeElement, 'ant-carousel');
     this.el = elementRef.nativeElement;
-
-    this.dir = directionality.value;
-    directionality.change?.pipe(takeUntil(this.destroy$)).subscribe(() => {
-      this.dir = directionality.value;
+  }
+  ngOnInit(): void {
+    this.dir = this.directionality.value;
+    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
+      this.dir = direction;
       this.switchStrategy();
     });
   }

components/cascader/cascader-li.component.ts

@@ -9,6 +9,8 @@ import {
   Component,
   ElementRef,
   Input,
+  OnInit,
+  Optional,
   Renderer2,
   TemplateRef,
   ViewEncapsulation
@@ -41,21 +43,27 @@ import { Directionality, Direction } from '@angular/cdk/bidi';
     '[class.ant-cascader-menu-item-disabled]': 'option.disabled'
   }
 })
-export class NzCascaderOptionComponent {
+export class NzCascaderOptionComponent implements OnInit {
   @Input() optionTemplate: TemplateRef<NzCascaderOption> | null = null;
   @Input() option!: NzCascaderOption;
   @Input() activated = false;
   @Input() highlightText!: string;
   @Input() nzLabelProperty = 'label';
   @Input() columnIndex!: number;
-  dir: Direction;
+  dir: Direction = 'ltr';
 
-  constructor(private cdr: ChangeDetectorRef, elementRef: ElementRef, renderer: Renderer2, directionality: Directionality) {
+  constructor(
+    private cdr: ChangeDetectorRef,
+    elementRef: ElementRef,
+    renderer: Renderer2,
+    @Optional() private directionality: Directionality
+  ) {
     renderer.addClass(elementRef.nativeElement, 'ant-cascader-menu-item');
-
-    this.dir = directionality.value;
-    directionality.change.subscribe(() => {
-      this.dir = directionality.value;
+  }
+  ngOnInit(): void {
+    this.dir = this.directionality.value;
+    this.directionality.change.subscribe((direction: Direction) => {
+      this.dir = direction;
     });
   }
 

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

@@ -126,7 +126,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
   isRange: boolean = false; // Indicate whether the value is a range value
   focused: boolean = false;
   extraFooter?: TemplateRef<NzSafeAny> | string;
-  dir: Direction;
+  dir: Direction = 'ltr';
 
   public panelMode: NzDateMode | NzDateMode[] = 'date';
   private destroyed$: Subject<void> = new Subject();
@@ -188,15 +188,9 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
     private renderer: Renderer2,
     private elementRef: ElementRef,
     protected dateHelper: DateHelperService,
-    @Optional() directionality: Directionality,
+    @Optional() private directionality: Directionality,
     @Host() @Optional() public noAnimation?: NzNoAnimationDirective
-  ) {
-    directionality.change?.pipe(takeUntil(this.destroyed$)).subscribe(() => {
-      this.dir = directionality.value;
-      cdr.detectChanges();
-    });
-    this.dir = directionality.value;
-  }
+  ) {}
 
   ngOnInit(): void {
     // Subscribe the every locale change if the nzLocale is not handled by user
@@ -230,6 +224,12 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
     });
 
     this.setModeAndFormat();
+
+    this.directionality.change?.pipe(takeUntil(this.destroyed$)).subscribe((direction: Direction) => {
+      this.dir = direction;
+      this.cdr.detectChanges();
+    });
+    this.dir = this.directionality.value;
   }
 
   ngOnChanges(changes: SimpleChanges): void {

components/descriptions/descriptions.component.ts

@@ -13,6 +13,8 @@ import {
   Input,
   OnChanges,
   OnDestroy,
+  OnInit,
+  Optional,
   QueryList,
   SimpleChanges,
   TemplateRef,
@@ -143,7 +145,7 @@ const defaultColumnMap: { [key in NzBreakpointEnum]: number } = {
     '[class.ant-descriptions-rtl]': 'dir === "rtl"'
   }
 })
-export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterContentInit {
+export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterContentInit, OnInit {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
   static ngAcceptInputType_nzBordered: BooleanInput;
   static ngAcceptInputType_nzColon: BooleanInput;
@@ -159,7 +161,7 @@ export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterConte
 
   itemMatrix: NzDescriptionsItemRenderProps[][] = [];
   realColumn = 3;
-  dir: Direction;
+  dir: Direction = 'ltr';
 
   private breakpoint: NzBreakpointEnum = NzBreakpointEnum.md;
   private destroy$ = new Subject<void>();
@@ -168,11 +170,12 @@ export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterConte
     public nzConfigService: NzConfigService,
     private cdr: ChangeDetectorRef,
     private breakpointService: NzBreakpointService,
-    directionality: Directionality
-  ) {
-    this.dir = directionality.value;
-    directionality.change?.pipe(takeUntil(this.destroy$)).subscribe(() => {
-      this.dir = directionality.value;
+    @Optional() private directionality: Directionality
+  ) {}
+  ngOnInit(): void {
+    this.dir = this.directionality.value;
+    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
+      this.dir = direction;
     });
   }
 

components/drawer/drawer.component.ts

@@ -101,7 +101,8 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'drawer';
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny> extends NzDrawerRef<T, R>
+export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny>
+  extends NzDrawerRef<T, R>
   implements OnInit, OnDestroy, AfterViewInit, OnChanges, NzDrawerOptionsOfComponent {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
   static ngAcceptInputType_nzClosable: BooleanInput;
@@ -131,7 +132,7 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny> exte
   @Input() nzOffsetX = 0;
   @Input() nzOffsetY = 0;
   private componentInstance: T | null = null;
-  dir: Direction;
+  dir: Direction = 'ltr';
 
   @Input()
   set nzVisible(value: boolean) {

components/dropdown/dropdown-menu.component.ts

@@ -12,6 +12,7 @@ import {
   ElementRef,
   Host,
   OnDestroy,
+  OnInit,
   Optional,
   Renderer2,
   TemplateRef,
@@ -61,15 +62,15 @@ export type NzPlacementType = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 't
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class NzDropdownMenuComponent implements AfterContentInit, OnDestroy {
+export class NzDropdownMenuComponent implements AfterContentInit, OnDestroy, OnInit {
   mouseState$ = new BehaviorSubject<boolean>(false);
   isChildSubMenuOpen$ = this.nzMenuService.isChildSubMenuOpen$;
   descendantMenuItemClick$ = this.nzMenuService.descendantMenuItemClick$;
   nzOverlayClassName: string = '';
   nzOverlayStyle: IndexableObject = {};
   @ViewChild(TemplateRef, { static: true }) templateRef!: TemplateRef<NzSafeAny>;
 
-  dir: Direction;
+  dir: Direction = 'ltr';
   private destroy$ = new Subject<void>();
 
   setMouseState(visible: boolean): void {
@@ -87,15 +88,16 @@ export class NzDropdownMenuComponent implements AfterContentInit, OnDestroy {
     private renderer: Renderer2,
     public viewContainerRef: ViewContainerRef,
     public nzMenuService: MenuService,
-    @Optional() directionality: Directionality,
+    @Optional() private directionality: Directionality,
     @Host() @Optional() public noAnimation?: NzNoAnimationDirective
-  ) {
-    directionality.change?.pipe(takeUntil(this.destroy$)).subscribe(() => {
-      this.dir = directionality.value;
-      cdr.detectChanges();
+  ) {}
+  ngOnInit(): void {
+    this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
+      this.dir = direction;
+      this.cdr.detectChanges();
     });
 
-    this.dir = directionality.value;
+    this.dir = this.directionality.value;
   }
 
   ngAfterContentInit(): void {