Is it possible to change class css properties dynamically?

ionic-v1
1

Hi I want to change some properties of table class dynamically. For example i want to change the direction to rtl.
Is there any way to do that?

/* Table */
.table tr th, .table tr td {
  position: relative;
  direction: ltr !important;
  vertical-align: middle !important;
  border-color: #1b1939 !important;
  border-width: 2px !important;
  border-right: 2px solid #100F27;
  text-align: center;
  height: 47px; }

I have tried this. But it does not work :smile:

<table st-table="rowCollection" class="table has-checkbox" ng-style="{'direction':langValue}">

Best Regards,
Mostafa

2

Have you tried to remove ‘!important’ from CSS?
Are you able to do it manually in browser just using Chrome inspector?

3

I have SASS. As SASS is compiled, I try to change the CSS after compiling SASS.
No, When i change it manually in browser, nothing happens.

4

I’m not sure what you are trying to achieve here, because the direction property just starts the text from the left or right (like left align or right align). Since you have applied text-align: center, the property does not any effect. Try removing the text-align property and see whether it works.

If you actually want to reverse the direction of writing like for arabic language, use direction property with unicode-bidi property like,

.selector {
    direction: rtl;
    unicode-bidi: bidi-override;
}

As for changing the styles dynamically, try this one:

ng-class="condition ? 'right_to_left' : 'left_to_right'"

.right_to_left  {
    direction: rtl;
    unicode-bidi: bidi-override;
}

.left_to_right  {
    direction: ltr;
    unicode-bidi: bidi-override;
}
5

Thank you for you reply. It works nice.