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.