Unable to specify the CSS class name dynamically

Ionic Framework ionic-v3
1

Greetings fellow developers,

I have run into this issue and I can’t find a reasonable explanation or solution. When I specify the as follows:

<ion-card-header class=“my_header”>

I get this:

<ion-card-header class=“my_header card-header card-header-ios”>

In other words, apart from my css class name I get a few others automatically (“card-header card-header-ios”).

But when I add a dynamic variable:

<ion-card-header class=“my_header-{{my.status}}”>

I get this (assuming that the value of my.status is 3):

<ion-card-header class=“my_header-3”>

So, even though the css class specified with the dynamic variable appears as expected, the automatically generated CSS classes (“card-header card-header-ios”) are missing.

Any ideas why this is happening?

Dimitrios

2

What happens if you put "my_header-3" into a variable (let’s say cardHeaderClass) in the controller, and put [class]="cardHeaderClass" in the template?

3

Thanks for your suggestion. No, that did not work either, meaning that you still get the class you have specified, but without the default ones.

4

<ion-card-header class=“my_header card-header card-header-ios”>

var element = document.querySelector(".my_header ");
element.classList.add(‘className’); // dynamic class Name

5

The [class.foo]="bar" syntax should be additive, but that means that you would have to have a known set of things that could go into the foo slot. I don’t know if that’s feasible in your situation.