Faigjaz Faigjaz - 1 year ago 284
TypeScript Question

Angular 2 - *ngFor with conditional class

I am using Angular2 and bootstrap for a component.
I am trying to add a class to my tr-tag if the property "2" of the test from the *ngFor loop is equal to an imported variable named newTest.
But it's not adding the class.

Here's my component:

loadTest() {
.then((data) => {
this.tests = data

ngOnInit() {

The table is displayed correctly, but the class isn't there.

The condition definitely is fullfilled, though.

Here's my html:

<div class="table-responsive">
<table class="table table-hover table-reflow">
<tr *ngFor="let test of tests" [class.newDevice]="test.2 === this.newTest" [attr.class]="test.1" >

Am I doing something else wrong?
I've tried achieving the same with jquery, too:

loadTest() {
.then((data) => {
this.tests = data
if (NewTest.length !== undefined) {
let index = this.tests.findIndex((e) => { return e.2 === NewTest })
let test = this.tests[index].id

Answer Source

[class.newDevice] and [attr.class] are overriding each other.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download