[Fixed] ToggleMask in primeNg password not working

Issue

I try to use passwordModule in my code, which is working fine then I tried to add toggle mask

<input id="float-password"
               type="password"
               [toggleMask]="true"
               pPassword />

it gives me the following error

Can't bind to 'toggleMask' since it isn't a known property of 'input'.

I have tried to find the reason and fix, but unfortunately I’m not getting it.

Solution

Use component selector instead of the directive, as directive does not contain toggleMask (See here) where as the component does.

Make sure to import PasswordModule

import { PasswordModule } from "primeng/password";

@NgModule({
  imports: [
    ...
    PasswordModule,
  ]
})
export class AppModule {}

and use it like so

<p-password [toggleMask]="true"></p-password> //Works

Stackblitz Example

BTW, pPassword directive has showPassword @Input which can be used to toggle password display