angular 5 - Conditional CSS application - is there a simpler way?

Question

I am taking in JSON data and generating a material list from them with mat-list using the *ngFor directive.

I have also researched and found that using [NgClass] = "{'CssClassName': condition}" enables me to apply different CSS classes to each list entry depending on any value of my choosing within the data itself.

However... I am changing the background style of each entry depending on their ID number, and I have 10 IDs making this NgClass section within the HTML rather long and difficult to read as you are not able to split this onto different lines...

You can see below how long the actual line of code is - of course the text does wrap in my editor, but it still look horrendous - Full code example

<mat-chip class="list-item" [ngClass] = "{'one':r.id === 1, 'two':r.id === 2,'three':r.id === 3, 'four':r.id === 4,'five':r.id === 5, 'six':r.id === 6,'seven':r.id === 7, 'eight':r.id === 8, 'nine':r.id === 9, 'ten':r.id === 10}">

Is there a more elegant way of achieving the same outcome that I am unaware of?

Eliseo · Accepted Answer · 2018-02-15 08:57:14Z

2

If your class are named "class1","class2","class3"... (not "one", "two","three"..) you can use

<mat-chip class="list-item" [ngClass]="'class'+r.id">

answered Feb 15, 2018 at 8:57

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

physicsboy Over a year ago

oh groovy! I didn't realise this could work. So much simpler than having to refactor all of my code XD

score 1 · Accepted Answer · 2018-02-15 08:55:49Z

1

You could make a function for that !

[ngClass]="createClassesObject(r)"

In your TS

createClassesObject(r: any) {
  return {
    one: r.id === 1,
    two: r.id === 2,
    // You get the point
  };
}

EDIT You can even shorten the function (proof of work) :

indexes = ['zero', 'one', 'two', 'three']; // etc.

createClassesObject(r: any) {
  return this.indexes.reduce((p, n) => {
    if (r.id === this.indexes.indexOf(n)) { p[n] = true; }
    return p;
  }, {})
}

edited Feb 15, 2018 at 8:55

answered Feb 15, 2018 at 8:49

user4676340

2 Comments

physicsboy Over a year ago

Thanks for explaining! Makes a lot of technical sense, although I am going to accept @Eliseo's answer above, don't think I don't like or don't appreciate yours! :-)

user4676340 Over a year ago

No problem, I too upvoted his answer. It's much cleaner and easier !

Collectives™ on Stack Overflow

angular 5 - Conditional CSS application - is there a simpler way?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related