From 6e4cd54f2a675685511d4a4fb4c213e0c75db37f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?=
 <72804437+Sinan997@users.noreply.github.com>
Date: Mon, 31 Jul 2023 11:21:13 +0300
Subject: [PATCH] Update CapsLock.directive.md

---
 docs/en/UI/Angular/CapsLock.directive.md | 29 +++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/docs/en/UI/Angular/CapsLock.directive.md b/docs/en/UI/Angular/CapsLock.directive.md
index 24bef39cdc..1e1021bdd4 100644
--- a/docs/en/UI/Angular/CapsLock.directive.md
+++ b/docs/en/UI/Angular/CapsLock.directive.md
@@ -7,11 +7,16 @@ In password inputs, You may want to show if Caps Lock is on. To make this even e
 
 `TrackCapsLockDirective` is standalone. In order to use the `TrackCapsLockDirective` in an HTML template, import it to related module or your standalone component:
 
+**Importing to NgModule**
 ```ts
 import { TrackCapsLockDirective } from '@abp/ng.core';
 
 @NgModule({
   //...
+  declarations: [
+   ...,
+   TestComponent
+  ],
   imports: [
    ...,
    TrackCapsLockDirective
@@ -22,15 +27,33 @@ 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 
+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. You can use this to warn user.
 
 See an example usage:
 
+**NgModule Component usage**
+```ts
+@Component({
+  selector: 'test-component',
+  template: `
+    <div class="d-flex flex-column">
+      <label>Password</label>
+      <input (abpCapsLock)="capsLock = $event"/>
+      <i *ngIf='capsLock'>icon</i>
+    </div>
+  `
+})
+export class TestComponent{
+  capsLock = false;
+}
+```
+
+**Standalone Component usage**
 ```ts
 import { TrackCapsLockDirective } from '@abp/ng.core'
 
 @Component({
-  selector: 'test-component',
+  selector: 'standalone-component',
   standalone: true,
   template: `
     <div class="d-flex flex-column">
@@ -41,7 +64,7 @@ import { TrackCapsLockDirective } from '@abp/ng.core'
   `,
   imports: [ TrackCapsLockDirective ]
 })
-export class TestComponent{
+export class StandaloneComponent{
   capsLock = false;
 }
 ```