3

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>
Abhishek
  • 1,742
  • 2
  • 14
  • 25
Que
  • 957
  • 2
  • 14
  • 35

3 Answers3

9

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;
}
Harun Yilmaz
  • 8,281
  • 3
  • 24
  • 35
  • Thanks Harun, do you mind me asking what the :'' is for at the end? Is that allowing for another condition check? – Que Jan 31 '19 at 12:15
  • You're welcome. Yes, it is the ternary operator. `condition ? true statement : false statement `. You may also check this answer out: [https://stackoverflow.com/a/37091329/1331040](https://stackoverflow.com/a/37091329/1331040) – Harun Yilmaz Jan 31 '19 at 12:17
  • ah gotcha. Ok lastly, (if you don't mind) - How could that accept multiple condition opposed to a 'true' or 'false' scenario. For example 'selectedColourPalette === 1' add this class, if selectedColourPalette === 2' do this etc? – Que Jan 31 '19 at 12:25
  • Very kind of you to take the time to answer that additional question. Thank you Harun! – Que Jan 31 '19 at 12:32
  • No worries :) Have a great day! – Harun Yilmaz Jan 31 '19 at 12:33
1

Since you simply want to add one predefined class, another option would be:

<div [class.border-blue]="selectedColourPalette > 0"></div>
Markus Dresch
  • 5,290
  • 3
  • 20
  • 40
0

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;
  }
Abhishek
  • 1,742
  • 2
  • 14
  • 25
  • Thanks for the response @Abhishek. Unfortunately that's not how I need it to work in this instance. Each colour palette object will contain several colours which I would like to append to the html. As you can see in my example, I would need to end up with a class "border-blue" etc – Que Jan 31 '19 at 11:54
  • @Que ok `colourPaletteOne` is variable ? – Abhishek Jan 31 '19 at 12:01
  • It's a value in the object. For example, this would work: [ngClass]="'border-' + colourPaletteOne.primary" - and the correct colour is assigned. I just need to know a way of formatting it so that it's only applied based on a condition. Whether that condition is selectedColourPalette === 1, or > 0. – Que Jan 31 '19 at 12:02
  • you do realize that 1 is >0 as well? – Markus Dresch Jan 31 '19 at 12:11
  • haha yes. I'm not fussed about the condition, it's just formatting it in such a way to accept a condition. – Que Jan 31 '19 at 12:23