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: ` +
+ + + icon +
+ ` +}) +export class TestComponent{ + capsLock = false; +} +``` + +The `abpCapsLock` event has been added to the `` element. Press Caps Lock to activate the `TrackCapsLockDirective`. + +See the result: + +![Show Password directive](./images/CapsLockDirective1.png) + +To see Caps Lock icon press Caps Lock. + +![Show Password directive](./images/CapsLockDirective2.png) \ No newline at end of file diff --git a/docs/en/UI/Angular/images/CapsLockDirective1.png b/docs/en/UI/Angular/images/CapsLockDirective1.png new file mode 100644 index 0000000000..2f143d755f Binary files /dev/null and b/docs/en/UI/Angular/images/CapsLockDirective1.png differ diff --git a/docs/en/UI/Angular/images/CapsLockDirective2.png b/docs/en/UI/Angular/images/CapsLockDirective2.png new file mode 100644 index 0000000000..a46ad710f1 Binary files /dev/null and b/docs/en/UI/Angular/images/CapsLockDirective2.png differ