CODEWITHSUNDEEP
javascriptangulartypescriptangular8angular-aot
PMerlet
PMerlet

Reputation: 2594

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

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?

Upvotes: 2

Views: 498

Answers (2)

Abel
Abel

Reputation: 798

You wrote 

   nbActive: 0;

Which means the only acceptable value for nbActive is 0.

You might needed this instead: 

   nbActive: number = 0;

Upvotes: 2

Yash Rami
Yash Rami

Reputation: 2327

you can try like this 


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

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

Upvotes: 0

Related Questions