Direction

Set the direction (LTR / RTL).

Set the default direction#

Set the dir attribute on the document body or html tag.

<html dir="rtl"></html>

Set in the template#

Import the Angular CDK bidi module.

import { BidiModule } from '@angular/cdk/bidi';

Set the direction for the application or its descendants in the template.

<div dir="rtl"></div>

Set in the service#

For example, the modal service.

class MyComponent {
  private modalService = inject(NzModalService);
  private nzConfigService = inject(NzConfigService);

  openModal(): void {
    this.modal.create({ nzDirection: 'rtl' });
  }

  setDirWithConfig(): void {
    this.nzConfigService.set('modal', { nzDirection: 'rtl' });
  }
}

References#