The following screenshot clearly shows the issue I am facing right now:
I am using ng2-translate for app translation. I managed to make the body of the application RTL by stating the direction (right or left) in the div padding tag.
<div padding dir="{{'LANG_DIR' | translate}}">
...
...
</div>
where LANG_DIR returns right or left depending on the language of the user.
The HTML for the sliding item:
<ion-list>
<ion-item-sliding *ngFor="let event of evens">
<ion-item>
<ion-thumbnail item-left>
<img src="https://placehold.it/100x100">
</ion-thumbnail>
<h2>{{event?.name}}</h2>
<p>{{event?.startDate | date}} - {{event?.endDate | date}}</p>
<p>{{ 'FROM' | translate}} {{event?.startTime}} {{ 'TO' | translate}} {{event?.endTime}}</p>
</ion-item>
<ion-item-options side="right">
<button ion-button color="primary" (click)="editEvent(event.id)">
<ion-icon name="create"></ion-icon>
Edit
</button>
<button ion-button color="secondary">
<ion-icon name="stats"></ion-icon>
Stats
</button>
</ion-item-options>
<ion-item-options side="left">
<button ion-button color="danger">
<ion-icon name="trash"></ion-icon>
Delete
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>