ngClass and ngIf condition fail to compile when aot is set to true

Question

I have a div with a ngClass condition:

<div [ngClass]="{ 'active': nbActive === 1 }" >
    <!-- some stuff -->
</div>

And a similar div with a ngIf condition:

<div *ngIf="nbActive === 1">
    <!-- some stuff -->
</div>

Below is the NbActive declaration:

export class WhyChooseUsComponent implements OnInit {
   nbActive: 0;
   constructor() { }
   // some stuff
}

If in my production configuration, I set:

"aot": true,
"buildOptimizer": true,

Then I get the following error:

This condition will always return 'false' since the types '0' and '1' have no overlap.

I don't get any error if I set aot and buildOptimizer to false and everything is working as expected.
Where does this issue come from and how can I fix this?

question edited. I renamed isActive to nbActive in order to avoid any confusion. — PMerlet, Sep 25 '19 at 09:38

score 2 · Accepted Answer · answered Sep 25 '19 at 09:37

2

You wrote

   nbActive: 0;

Which means the only acceptable value for nbActive is 0.

You might needed this instead:

   nbActive: number = 0;

answered Sep 25 '19 at 09:37

Abel

688
6
19

score 0 · Answer 2 · answered Sep 25 '19 at 09:30

0

you can try like this


<div [ngClass]="isActive === 1 ? 'active': '' " >
    <!-- some stuff -->
</div>

<div *ngIf="isActive">
    <!-- some stuff -->
</div>

answered Sep 25 '19 at 09:30

Yash Rami

2,276
1
10
16

ngClass and ngIf condition fail to compile when aot is set to true

2 Answers2