ionic 2 alignment text automatically

313 views Asked by At

In my app i have multiple language in some time english and arabic, so i want to adjust automatically the alignment of the text in two case english and arabic.

So How i can alignment english and arabic text automatically ex:

if i have a english text in my app i want alignment to left and if arabic text set alignment to right how i can do this automatically in my application ?

Note : the text received from the server

any suggestion about that ?

JSON:

{
    "error": false,
    "statusCode": 200,
    "statusText": "OK",
    "date": "2016-12-14T13:11:18+00:00",
    "message": "",
    "details": [],
    "list": [
        {
            "id": 117,
            "parent_id": 0,
            "subject": "هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها.",
            "message": "هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها.",
            "data": null,
            "type": "normal",
            "created_at": 1481629305,
            "updated_at": 1481629305,
            "typeColor": "#00A65A",
        },
        {
            "id": 117,
            "parent_id": 0,
            "subject": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
            "message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
            "data": null,
            "type": "normal",
            "created_at": 1481629305,
            "updated_at": 1481629305,
            "typeColor": "#00A65A",
        }
    ]
}
1

There are 1 answers

1
Mohan Gopi On

try to use ngclass to achive this

you css

.englisAlign{
   text-align: left;
}
.arabicAlign{
   text-align: right;
}

your html

 <div [ngClass]="languages ? 'englisAlign' : 'arabicAlign'">{{language }}</div>

in your ts file make languages variable true or false based upon your need