Applying Multiple Styles Based on Array Elements

Question

I am currently creating an array of active and inactive users and was wondering if it would be possible to style specific rows in a table based on whether or not said Users are active or inactive.

Can you attach a style to an array in Angular? For example, say I'm retrieving data from a database of students and depending on whether or not they're active/inactive, I can apply a style to that row on the fly?

An easy way may be to create two separate array for the students and then apply the style depending on which array we're targeting but if I wanted to save some space and keep everything in one array, would there be a way of doing so?

Here is some code:

<user-table [loadingError]="_loadingError"
    [loading]="_loadingUsers"
    [users]="_users">
</user-table>

_users is the array that I create in the corresponding TypeScript file. Would I able to say something like,

If ([users].firstName == 'John') apply johnStyles from .less file

I can clarify if need be.

ichigolas · Accepted Answer · 2017-10-10 19:50:03Z

1

For Angular 1.x

The ng-class directive allows to dynamically add classes to elements. ng-style does the same for inline css styles.

.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app
  ng-init='users = [{name: "John", active: true}, {name: "Peter", active: false}]'
>
  <div
    ng-repeat='u in users'
    ng-class='{ active: u.active }'
    ng-style='{ color: u.active && "white" }'
  >{{ u.name }}</div>
</div>

https://docs.angularjs.org/api/ng/directive/ngClass https://docs.angularjs.org/api/ng/directive/ngStyle

For Angular >= 2.0

The API seems to have remained pretty much the same:

https://angular.io/api/common/NgClass
https://angular.io/api/common/NgStyle

answered Oct 10, 2017 at 19:50

ichigolas

7,75532 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

Applying Multiple Styles Based on Array Elements

1 Answer 1

For Angular 1.x

For Angular >= 2.0

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

For Angular 1.x

For Angular >= 2.0

Comments

Your Answer

Sign up or log in

Post as a guest

Related