RTL Support in Angular Button

19 Aug 20221 minute to read

In some cases you can use right to left alignment. Here, RTL support is provided using enableRTL property. In RTL mode when you have more than one content (image/text, image/image) in button, then these content are aligned in right to left format. For example, when text is in left and image is in right position, after applying right to left alignment these position are interchanged.

The following steps explains the details about rendering the button with Right to left alignment support.

In the HTML page, add the following button elements to configure button widget.

  • HTML
  • <table width="500px">
                <button id="buttonType_button" [showRoundedCorner]="true" [enableRTL]="true" size="large" contentType="TextAndImage"  prefixIcon="e-icon e-login" type="button" ej-button text="button"></button> 
  • HTML
  • import {Component} from '@angular/core';
        selector: 'ej-app',
        templateUrl: './default.component.html',
    export class DefaultComponent {
        constructor() {

    In above mentioned code example prefixIcon property is used and the icon that is to be on left side, (before text) is rendered on right side as enableRTL property is used with prefixIcon. Consequently, the alignment is changed in right to left order.

    Execute the above code to render the following output.

    Angular Button RTL Support