RTL Support

What problem does this feature solve?

Currently Ant-Design in v4 supports rtl in all components and demos, in this issue i want to add progress of making all components of ng-zorro-antd support rtl.

What does the proposed API look like?

dir: Direction = 'ltr';
constructor(
  private cdr: ChangeDetectorRef,
  @Optional() private directionality: Directionality
) {}

ngOnInit(): void {
  this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction: Direction) => {
    this.dir = direction;
    this.cdr.detectChanges();
  });

  this.dir = this.directionality.value;
}

  <div
    #tableMainElement
    class="ant-table"
    [class.ant-table-rtl]="dir === 'rtl'"
  >
</div>

RTL Progress #4703

• Button
• Icon
• Typography
• Grid
• Layout
• Affix
• Breadcrumb
• Dropdown
• Menu
• Pagination
• PageHeader
• Steps
• AutoComplete
• CheckBox
• Cascader
• DatePicker
• Form: hdm91
• InputNumber: hdm91
• Input: hdm91
• Mention
• Rate
• Radio
• Switch
• Slider: hdm91
• Select
• TreeSelect
• Transfer: hdm91
• TimePicker
• Upload: hdm91
• Avatar
• Badge
• Comment
• Collapse: hdm91
• Carousel
• Card
• Calendar
• Description List
• Empty
• List: hdm91
• Popover
• Statistic
• Tree: hdm91
• Tooltip
• Timeline
• Tag
• Tabs: hdm91
• Table
• Alert: hdm91
• Drawer
• Modal: hdm91
• Message
• Notification
• Progress
• Popconfirm
• Result
• Spin: hdm91
• Skeleton
• Anchor (No need to RTL)
• BackTop
• ConfigProvider
• Divider (No need to RTL)
• Front page

[hdm91]

Hi @saeedrahimi thanks for your participation in ng zorro RTL support , i will be happy to help you.

[HDaghash]

Thank you @saeedrahimi for supporting this any clue when this will be completed & released ?

Thanks again.