Update CapsLock.directive.md

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;
 }
 ```