I am trying to create my own UI library using angular and Tailwind, I am facing an issue using ngClass :
<button
[ngClass]="{
'px-4 py-2 text-sm': size === 'md',
'px-4 py-2 text-base': size === 'lg',
}"
>
My Button
</button>
I want my class to be one of these above when the condition on the size is met.
The problem is when the size equals 'md' and so the first condition is met : the class in the dom is only text-sm instead of px-4 py-2 text-sm
The ngClass documentations says :
keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed
My understanding is that in my example :
px-4 py-2 text-base is being removed from the class as so the only one remaining is text-sm.I think I was able to understand the problem, but since I'm new to angular and I would like to learn how to use properly ngClass, does anyone have a solution to solve this ?
Add the common classes to your regular class attribute, like this:
<button
[ngClass]="{
'text-sm': size === 'md',
'text-base': size === 'lg',
}"
class="px-4 py-2"
>
My Button
</button>
Here you go, do it like this with multiple conditions:
[ngClass]="property === value1 ? 'css-class-name1' : property === value2 ? 'css-class-name2' : property === value3 ? 'css-class-name3' : 'default-css'"