0

I want to add an "active" class when I click on a certain tab using the pug code

a.nav-link([class.active]="view === 'profile'", (click)="changeView('profile')") Profile
                
a.nav-link([class.active]="view === 'products'", (click)="changeView('products')") Products
                
a.nav-link([class.active]="view === 'loans'", (click)="changeView('loans')") Loans
                
a.nav-link([class.active]="view === 'notifications'", (click)="changeView('notifications')") Notifications

It works fine as can be seen in the image enter image description here

However when I build it for production, I get the error

This condition will always return 'false' since the types '"loans"' and '"profile"' have no overlap.

I have used typeof view and it returns string, at any given time. I am at a loss as to why the error is pointing at the values of the view variable as the type instead.

in the .ts file, I innitialzed the view variable as view:string = 'profile'

What I'm I missing? I have read and re-read the angular docs on ngClass as well as several posts here on stackoverflow to no avail.

Tim Chosen
  • 41
  • 8
  • I feel that you can not use "pug code" with Angular. Angular works using typescript (and then the code is transpile to javascript). You're using "pug code" that is a way to write javascript code. But Angular can not understand your javascrip code. – Eliseo Mar 27 '22 at 13:40
  • @Eliseo pug makes it easier and simpler to code for me. I have a script that handles everything on build. Like I explained everything works as expected except for building for production when the typescript error is encountered – Tim Chosen Mar 27 '22 at 18:21
  • I am guessing you get the error during build but after build it actually works? The pug code transpiles to valid html. And also and syntax for the class selector is valid too. So that leads me to believe that TS compiler can't handle pug syntax. – Joosep Parts Mar 28 '22 at 11:12
  • @Eliseo The issue is not with the pug, this is the culprit, "in the .ts file, I initialized the view variable as `view:string = 'profile'`". I changed it to `view:any` since I am assigning the values in a function called changeView, I enforced the string type with `changeView(currentView:string='profile'){this.view = currentView}`. With this it builds without errors. Just wondering why `view:string = 'profile'` was causing it to see profile as the datatype and not string @Joosep.P – Tim Chosen Mar 30 '22 at 17:04

0 Answers0