I want to add a class based on an item in an object within my components typescript file. I can't seem to get the format correct for this to work.
When the 'selectedColourPalette' value is greater than zero, I want to add the primary colour from 'colourPaletteOne' into the HTML.
CSS
colourPaletteOne = {
primary: 'blue',
secondary: 'grey',
}
HTML
<div> [ngClass]="{'border-{{colourPaletteOne.primary}}' : selectedColourPalette > 0}"></div>
You should not use double braces {{ }} when binding to attribute using square brackets []. Therefore, it would be like:
<div [ngClass]="selectedColourPalette > 0 ? 'border-' + colourPaletteOne.primary : ''"></div>
Edit Note: Changed the ngClass structure, fixed typo
Update
If you want to improve the condition checking logic, then you may want to add a method in component and pass the parameters to it, return the desired CSS class as string. Like:
In template
<div [ngClass]="getCssClassByPalette(selectedColourPalette, colourPaletteOne)"></div>
In component
getCssClassByPalette = (scp, cp) => {
let cssClass = '';
swicth(scp){
case 1: {
cssClass = cp.primary;
/* do stuff */
break; // or return the css class
}
/* other cases */
}
return cssClass;
}
condition ? true statement : false statement . You may also check this answer out: https://stackoverflow.com/a/37091329/1331040Since you simply want to add one predefined class, another option would be:
<div [class.border-blue]="selectedColourPalette > 0"></div>
Try this:
Condition is if selectedColourPalette > 0 than border-blue is show otherwise border-grey will be show
HTML
<div [ngClass]="selectedColourPalette > 0? 'border-' + colourPaletteOne.primary:'border-' + colourPaletteOne.secondary">sadvsdv</div>
TS
selectedColourPalette = 1;
colourPaletteOne = {
primary: 'blue',
secondary: 'grey',
}
CSS
.border-blue {
background-color: blue;
}
.border-blue {
background-color: grey;
}
colourPaletteOne is variable ?
colourPaletteOnein the typescript file or css?