From 764e1231b786501be5b8dddef92f0d3af73b0402 Mon Sep 17 00:00:00 2001
From: sumeyye <sum.the.developer@gmail.com>
Date: Wed, 9 Jul 2025 17:04:21 +0300
Subject: [PATCH] update: caps lock directive page

---
 .../ui/angular/caps-lock-directive.md         | 53 +++----------------
 1 file changed, 7 insertions(+), 46 deletions(-)

diff --git a/docs/en/framework/ui/angular/caps-lock-directive.md b/docs/en/framework/ui/angular/caps-lock-directive.md
index f6a9c83931..fc5ee46fd1 100644
--- a/docs/en/framework/ui/angular/caps-lock-directive.md
+++ b/docs/en/framework/ui/angular/caps-lock-directive.md
@@ -5,66 +5,27 @@ In password inputs, You may want to show if Caps Lock is on. To make this even e
 
 ## Getting Started
 
-`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
-  ],
-})
-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. You can use this to warn user.
+`TrackCapsLockDirective` is standalone. In order to use the `TrackCapsLockDirective` in an HTML template, import it to related component. 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: 'standalone-component',
-  standalone: true,
+  selector: 'sample-component',
   template: `
     <div class="d-flex flex-column">
       <label>Password</label>
       <input (abpCapsLock)="capsLock = $event"/>
-      <i *ngIf="capsLock">icon</i>
+      @if (capslock) {
+        <i>icon</i>
+      }
     </div>
   `,
-  imports: [TrackCapsLockDirective]
+  imports: [ TrackCapsLockDirective ]
 })
-export class StandaloneComponent{
+export class SampleComponent{
   capsLock = false;
 }
 ```