From 70da2fb93a94fb7c7a57591b293deeb500f3c196 Mon Sep 17 00:00:00 2001
From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com>
Date: Thu, 9 Jan 2025 17:51:02 +0400
Subject: [PATCH] Angular: add info about standalone and directives (#6970)

---
 .../90 Using Directives.md                    | 62 +++++++++++++++++++
 includes/ng-import-devextreme-modules.md      | 25 +++++---
 2 files changed, 79 insertions(+), 8 deletions(-)
 create mode 100644 concepts/40 Angular Components/20 Component Configuration Syntax/90 Using Directives.md

diff --git a/concepts/40 Angular Components/20 Component Configuration Syntax/90 Using Directives.md b/concepts/40 Angular Components/20 Component Configuration Syntax/90 Using Directives.md
new file mode 100644
index 0000000000..a772feb7c5
--- /dev/null
+++ b/concepts/40 Angular Components/20 Component Configuration Syntax/90 Using Directives.md	
@@ -0,0 +1,62 @@
+To change attributes of all components of one type in an app, use [defaultOptions](/Documentation/ApiReference/UI_Components/dxTextBox/Methods/#defaultOptionsrule). To change attributes of multiple components, use directives.
+
+When working with [custom directives](https://angular.dev/guide/directives/attribute-directives), follow these steps:
+
+1. Import required components in the `.directive.ts` file. For example, `import { DxButtonComponent } from 'devextreme-angular';`.
+2. Define the components in the constructor. Use the [`@Host`](https://angular.dev/api/core/Host?tab=usage-notes) decorator to access the instance of hosting components. Use the [`@Optional`](https://angular.dev/api/core/Optional?tab=usage-notes) decorator when specifying multiple components.
+3. Use the `ngOnViewInit()` hook to ensure component initialization.
+
+The following code snippet creates a directive that changes the style and switches "apple" to "banana" in the TextArea and TextBox components:
+
+    <!-- tab: replace.directive.ts -->
+    import { Directive, Host, Optional } from '@angular/core';
+    import { DxTextBoxComponent, DxTextAreaComponent } from 'devextreme-angular';
+    import { DxTextAreaTypes } from 'devextreme-angular/ui/text-area';
+    import { DxTextBoxTypes } from 'devextreme-angular/ui/text-box';
+
+    @Directive({
+        selector: '[appReplace]',
+        standalone: true,
+    })
+    export class ReplaceDirective {
+        component: any;
+
+        constructor(
+            @Optional() @Host() textBox: DxTextBoxComponent,
+            @Optional() @Host() textArea: DxTextAreaComponent
+        ) {
+            this.component = textBox || textArea;
+        }
+
+        replaceApple(e: DxTextAreaTypes.FocusOutEvent & DxTextBoxTypes.FocusOutEvent) {
+            const value = e.component.option('value');
+            e.component.option('value', value?.replace(/apple/g, 'banana'));
+        }  
+
+        ngAfterViewInit() {
+            this.component.instance.option('stylingMode', 'filled');
+            this.component.instance.on('focusOut', this.replaceApple);
+        }
+
+        ngOnDestroy() {
+            this.component.instance.off('focusOut', this.replaceApple);
+        }
+    }
+
+    <!-- tab: app.component.ts -->
+    import { Component } from '@angular/core';
+    import { DxTextBoxModule, DxTextAreaModule } from 'devextreme-angular';
+    import { ReplaceDirective } from './replace.directive';
+
+    @Component({
+        selector: 'app-root',
+        standalone: true,
+        imports: [DxTextBoxModule, DxTextAreaModule, ReplaceDirective],
+        templateUrl: './app.component.html',
+        styleUrl: './app.component.css'
+    })
+    export class AppComponent { }
+
+    <!-- tab: app.component.html -->
+    <dx-text-area appReplace></dx-text-area>
+    <dx-text-box appReplace></dx-text-box>
\ No newline at end of file
diff --git a/includes/ng-import-devextreme-modules.md b/includes/ng-import-devextreme-modules.md
index 54236a50a7..eee2394bd3 100644
--- a/includes/ng-import-devextreme-modules.md
+++ b/includes/ng-import-devextreme-modules.md
@@ -1,4 +1,19 @@
-Go to the `NgModule` in which you are going to use DevExtreme UI components and import the required DevExtreme modules. Note that if [tree shaking](/concepts/40%20Angular%20Components/40%20Common%20Features/10%20Tree%20Shaking.md '/Documentation/Guide/Angular_Components/Common_Features/Tree_Shaking/') is configured in your application, you can import the modules from `devextreme-angular`. Otherwise, you should import them from specific files. 
+If you use [standalone](https://angular.dev/guide/components) components, import the modules as shown below:
+
+    <!-- tab: app.component.ts -->
+    import { Component } from '@angular/core';
+    import { DxButtonModule } from 'devextreme-angular';
+
+    @Component({
+        selector: 'app-root',
+        standalone: true,
+        imports: [DxButtonModule],
+        templateUrl: './app.component.html',
+        styleUrl: './app.component.css'
+    })
+    export class AppComponent { }
+    
+If you use `NgModule`, import the DevExtreme modules as demonstrated in the following code snippet. If [tree shaking](/concepts/40%20Angular%20Components/40%20Common%20Features/10%20Tree%20Shaking.md '/Documentation/Guide/Angular_Components/Common_Features/Tree_Shaking/') is configured in your application, import the modules from `devextreme-angular`. If not, import them from files.
 
     <!-- tab: app.module.ts -->
     // ...
@@ -24,13 +39,7 @@ Now you can use the DevExtreme UI component in your application:
     </dx-button>
 
     <!-- tab: app.component.ts -->
-    import { Component } from '@angular/core';
-
-    @Component({
-        selector: 'app-root',
-        templateUrl: './app.component.html',
-        styleUrls: ['./app.component.css']
-    })
+    // ...
     export class AppComponent {
         helloWorld() {
             alert('Hello world!');