From 79def9092aa4a5840662a905b34c00e0957de23a Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Thu, 9 Jan 2025 12:28:39 +0400 Subject: [PATCH 1/5] Angular: add info about standalone and directives --- .../90 Using Directives.md | 55 +++++++++++++++++++ includes/ng-import-devextreme-modules.md | 23 +++++--- 2 files changed, 71 insertions(+), 7 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..85e847b264 --- /dev/null +++ b/concepts/40 Angular Components/20 Component Configuration Syntax/90 Using Directives.md @@ -0,0 +1,55 @@ +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 "apple" to "banana" in TextArea and TextBox components: + + + import { Directive, Host, Optional } from '@angular/core'; + import { DxTextBoxComponent, DxTextAreaComponent } from 'devextreme-angular'; + + @Directive({ + selector: '[appReplace]', + standalone: true, + }) + export class ReplaceDirective { + component: any; + + constructor( + @Optional() @Host() textBox: DxTextBoxComponent, + @Optional() @Host() textArea: DxTextAreaComponent + ) { + this.component = textBox || textArea; + } + + replaceApple(value: string) { + return value.replace(/apple/g, 'banana'); + } + + ngAfterViewInit() { + this.component.instance.option('onFocusOut', (e: any) => { + const value = e.component.option('value'); + console.log('Original value:', value); + e.component.option('value', this.replaceApple(value)); + }); + } + } + + + 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 { } + + + + \ No newline at end of file diff --git a/includes/ng-import-devextreme-modules.md b/includes/ng-import-devextreme-modules.md index 54236a50a7..d3af275949 100644 --- a/includes/ng-import-devextreme-modules.md +++ b/includes/ng-import-devextreme-modules.md @@ -15,6 +15,21 @@ Go to the `NgModule` in which you are going to use DevExtreme UI components and }) export class AppModule { } +If you use [standalone](https://angular.dev/guide/components) components, import the modules as following: + + + 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 { } + Now you can use the DevExtreme UI component in your application: @@ -24,13 +39,7 @@ Now you can use the DevExtreme UI component in your application: - import { Component } from '@angular/core'; - - @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] - }) + // ... export class AppComponent { helloWorld() { alert('Hello world!'); From 86e107d5f54db4172c9f82f2e46f963287433866 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Thu, 9 Jan 2025 15:49:34 +0400 Subject: [PATCH 2/5] Update after review --- .../90 Using Directives.md | 23 ++++++++----- includes/ng-import-devextreme-modules.md | 32 +++++++++---------- 2 files changed, 31 insertions(+), 24 deletions(-) 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 index 85e847b264..89267deb64 100644 --- 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 @@ -1,13 +1,18 @@ +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 specific 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 "apple" to "banana" in TextArea and TextBox components: +The following code snippet creates a directive that changes styling mode and switches "apple" to "banana" in TextArea and TextBox components: 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]', @@ -23,16 +28,18 @@ The following code snippet creates a directive that changes "apple" to "banana" this.component = textBox || textArea; } - replaceApple(value: string) { - return value.replace(/apple/g, 'banana'); + 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('onFocusOut', (e: any) => { - const value = e.component.option('value'); - console.log('Original value:', value); - e.component.option('value', this.replaceApple(value)); - }); + this.component.instance.option('stylingMode', 'filled'); + this.component.instance.on('focusOut', this.replaceApple); + } + + ngOnDestroy() { + this.component.instance.off('focusOut'); } } diff --git a/includes/ng-import-devextreme-modules.md b/includes/ng-import-devextreme-modules.md index d3af275949..7e2ec1c01a 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 following: + + + 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 necessary 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 specific files. // ... @@ -15,21 +30,6 @@ Go to the `NgModule` in which you are going to use DevExtreme UI components and }) export class AppModule { } -If you use [standalone](https://angular.dev/guide/components) components, import the modules as following: - - - 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 { } - Now you can use the DevExtreme UI component in your application: From 7b03be043ad57539da8ffb5f16b8056500f6e3e8 Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova Date: Thu, 9 Jan 2025 17:24:07 +0400 Subject: [PATCH 3/5] Minor fix --- .../20 Component Configuration Syntax/90 Using Directives.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 89267deb64..c4fd7e2a9f 100644 --- 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 @@ -39,7 +39,7 @@ The following code snippet creates a directive that changes styling mode and swi } ngOnDestroy() { - this.component.instance.off('focusOut'); + this.component.instance.off('focusOut', this.replaceApple); } } From 37e2a9e59565e47996f83ce5783556278bf399ef Mon Sep 17 00:00:00 2001 From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Thu, 9 Jan 2025 17:47:16 +0400 Subject: [PATCH 4/5] Apply suggestions from code review Co-authored-by: DirkPieterse --- .../20 Component Configuration Syntax/90 Using Directives.md | 4 ++-- includes/ng-import-devextreme-modules.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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 index c4fd7e2a9f..a772feb7c5 100644 --- 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 @@ -1,4 +1,4 @@ -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 specific components, use directives. +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: @@ -6,7 +6,7 @@ When working with [custom directives](https://angular.dev/guide/directives/attri 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 styling mode and switches "apple" to "banana" in TextArea and TextBox components: +The following code snippet creates a directive that changes the style and switches "apple" to "banana" in the TextArea and TextBox components: import { Directive, Host, Optional } from '@angular/core'; diff --git a/includes/ng-import-devextreme-modules.md b/includes/ng-import-devextreme-modules.md index 7e2ec1c01a..86260b2a00 100644 --- a/includes/ng-import-devextreme-modules.md +++ b/includes/ng-import-devextreme-modules.md @@ -13,7 +13,7 @@ If you use [standalone](https://angular.dev/guide/components) components, import }) export class AppComponent { } -If you use `NgModule`, import the necessary 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 specific files. +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. // ... From 424ae1891f6faba63ccd358143b121f3a0d547a0 Mon Sep 17 00:00:00 2001 From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Thu, 9 Jan 2025 17:47:45 +0400 Subject: [PATCH 5/5] Apply suggestions from code review --- includes/ng-import-devextreme-modules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/includes/ng-import-devextreme-modules.md b/includes/ng-import-devextreme-modules.md index 86260b2a00..eee2394bd3 100644 --- a/includes/ng-import-devextreme-modules.md +++ b/includes/ng-import-devextreme-modules.md @@ -1,4 +1,4 @@ -If you use [standalone](https://angular.dev/guide/components) components, import the modules as following: +If you use [standalone](https://angular.dev/guide/components) components, import the modules as shown below: import { Component } from '@angular/core';