diff --git a/docs/en/UI/Angular/CapsLock.directive.md b/docs/en/UI/Angular/CapsLock.directive.md new file mode 100644 index 0000000000..4b92d61124 --- /dev/null +++ b/docs/en/UI/Angular/CapsLock.directive.md @@ -0,0 +1,52 @@ +# Show Password Directive + +In password inputs,You may want to show if Caps Lock is on. To make this even easier, you can use the `TrackCapsLockDirective` which has been exposed by the `@abp/ng.core` package. + + +## Getting Started + +In order to use the `TrackCapsLockDirective` in an HTML template, the **`CoreModule`** should be imported into your module like this: + +```ts +// ... +import { CoreModule } from '@abp/ng.core'; + +@NgModule({ + //... + imports: [..., CoreModule], +}) +export class MyFeatureModule {} +``` + +## Usage + +The `TrackCapsLockDirective` is very easy to use. The directive's selector is **`abpCapsLock`**. By adding the `abpCapsLock` event to an element, you can track the status of Caps Lock. U can use this to warn user + +See an example usage: + +```ts +@Component({ + selector: 'test-component', + standalone: true, + template: ` +