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
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.