Angular: Add child validation method (fix T1269950) (DevExpress#28657)

Author: dxvladislavvolkov

package.json

@@ -44,7 +44,7 @@
     "axe-core": "4.10.2",
     "cheerio": "1.0.0-rc.10",
     "codelyzer": "6.0.2",
-    "devextreme-internal-tools": "16.0.0",
+    "devextreme-internal-tools": "16.2.0",
     "http-server": "14.1.1",
     "husky": "8.0.3",
     "jest": "29.7.0",

packages/devextreme-angular/src/core/component.ts

@@ -210,6 +210,13 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     }
   }
 
+  protected _setChildren(propertyName, value, className) {
+    if (this.checkContentChildren(propertyName, value, className)) {
+      this.setContentChildren(propertyName, value, className);
+      this.setChildren(propertyName, value);
+    }
+  }
+
   constructor(
     protected element: ElementRef,
     private readonly ngZone: NgZone,
@@ -293,7 +300,7 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
   contentChildren = {};
 
   checkContentChildren<T>(propertyName: string, items: QueryList<T>, className: string) {
-    if (this.contentChildren[propertyName]) {
+    if (this.contentChildren[propertyName] && this.contentChildren[propertyName] !== className) {
       if (items.length > 0) {
         if (console && console.warn) {
           console.warn(`In ${this.constructor.name}, 

packages/devextreme-angular/src/ui/accordion/index.ts

@@ -714,8 +714,7 @@ export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent i
         return this._getOption('items');
     }
     set itemsChildren(value) {
-        this.setContentChildren('items', value, 'DxiAccordionItemComponent');
-        this.setChildren('items', value);
+        this._setChildren('items', value, 'DxiAccordionItemComponent');
     }
 
 
@@ -724,9 +723,7 @@ export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent i
         return this._getOption('items');
     }
     set itemsLegacyChildren(value) {
-        if (this.checkContentChildren('items', value, 'DxiItemComponent')) {
-           this.setChildren('items', value);
-        }
+        this._setChildren('items', value, 'DxiItemComponent');
     }
 
 

packages/devextreme-angular/src/ui/action-sheet/index.ts

@@ -506,8 +506,7 @@ export class DxActionSheetComponent<TItem = any, TKey = any> extends DxComponent
         return this._getOption('items');
     }
     set itemsChildren(value) {
-        this.setContentChildren('items', value, 'DxiActionSheetItemComponent');
-        this.setChildren('items', value);
+        this._setChildren('items', value, 'DxiActionSheetItemComponent');
     }
 
 
@@ -516,9 +515,7 @@ export class DxActionSheetComponent<TItem = any, TKey = any> extends DxComponent
         return this._getOption('items');
     }
     set itemsLegacyChildren(value) {
-        if (this.checkContentChildren('items', value, 'DxiItemComponent')) {
-           this.setChildren('items', value);
-        }
+        this._setChildren('items', value, 'DxiItemComponent');
     }
 
 

packages/devextreme-angular/src/ui/autocomplete/index.ts

@@ -1363,17 +1363,15 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C
         return this._getOption('buttons');
     }
     set buttonsChildren(value) {
-        this.setContentChildren('buttons', value, 'DxiAutocompleteButtonComponent');
-        this.setChildren('buttons', value);
+        this._setChildren('buttons', value, 'DxiAutocompleteButtonComponent');
     }
 
     @ContentChildren(DxiAutocompleteItemComponent)
     get itemsChildren(): QueryList<DxiAutocompleteItemComponent> {
         return this._getOption('items');
     }
     set itemsChildren(value) {
-        this.setContentChildren('items', value, 'DxiAutocompleteItemComponent');
-        this.setChildren('items', value);
+        this._setChildren('items', value, 'DxiAutocompleteItemComponent');
     }
 
 
@@ -1382,19 +1380,15 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C
         return this._getOption('buttons');
     }
     set buttonsLegacyChildren(value) {
-        if (this.checkContentChildren('buttons', value, 'DxiButtonComponent')) {
-           this.setChildren('buttons', value);
-        }
+        this._setChildren('buttons', value, 'DxiButtonComponent');
     }
 
     @ContentChildren(DxiItemComponent)
     get itemsLegacyChildren(): QueryList<DxiItemComponent> {
         return this._getOption('items');
     }
     set itemsLegacyChildren(value) {
-        if (this.checkContentChildren('items', value, 'DxiItemComponent')) {
-           this.setChildren('items', value);
-        }
+        this._setChildren('items', value, 'DxiItemComponent');
     }
 
 

packages/devextreme-angular/src/ui/box/index.ts

@@ -419,8 +419,7 @@ export class DxBoxComponent<TItem = any, TKey = any> extends DxComponent impleme
         return this._getOption('items');
     }
     set itemsChildren(value) {
-        this.setContentChildren('items', value, 'DxiBoxItemComponent');
-        this.setChildren('items', value);
+        this._setChildren('items', value, 'DxiBoxItemComponent');
     }
 
 
@@ -429,9 +428,7 @@ export class DxBoxComponent<TItem = any, TKey = any> extends DxComponent impleme
         return this._getOption('items');
     }
     set itemsLegacyChildren(value) {
-        if (this.checkContentChildren('items', value, 'DxiItemComponent')) {
-           this.setChildren('items', value);
-        }
+        this._setChildren('items', value, 'DxiItemComponent');
     }
 
 

packages/devextreme-angular/src/ui/button-group/index.ts

@@ -499,8 +499,7 @@ export class DxButtonGroupComponent extends DxComponent implements OnDestroy, On
         return this._getOption('items');
     }
     set itemsChildren(value) {
-        this.setContentChildren('items', value, 'DxiButtonGroupItemComponent');
-        this.setChildren('items', value);
+        this._setChildren('items', value, 'DxiButtonGroupItemComponent');
     }
 
 
@@ -509,9 +508,7 @@ export class DxButtonGroupComponent extends DxComponent implements OnDestroy, On
         return this._getOption('items');
     }
     set itemsLegacyChildren(value) {
-        if (this.checkContentChildren('items', value, 'DxiItemComponent')) {
-           this.setChildren('items', value);
-        }
+        this._setChildren('items', value, 'DxiItemComponent');
     }
 
 

packages/devextreme-angular/src/ui/chart/index.ts

@@ -1447,35 +1447,31 @@ export class DxChartComponent extends DxComponent implements OnDestroy, OnChange
         return this._getOption('annotations');
     }
     set annotationsChildren(value) {
-        this.setContentChildren('annotations', value, 'DxiChartAnnotationComponent');
-        this.setChildren('annotations', value);
+        this._setChildren('annotations', value, 'DxiChartAnnotationComponent');
     }
 
     @ContentChildren(DxiChartPaneComponent)
     get panesChildren(): QueryList<DxiChartPaneComponent> {
         return this._getOption('panes');
     }
     set panesChildren(value) {
-        this.setContentChildren('panes', value, 'DxiChartPaneComponent');
-        this.setChildren('panes', value);
+        this._setChildren('panes', value, 'DxiChartPaneComponent');
     }
 
     @ContentChildren(DxiChartSeriesComponent)
     get seriesChildren(): QueryList<DxiChartSeriesComponent> {
         return this._getOption('series');
     }
     set seriesChildren(value) {
-        this.setContentChildren('series', value, 'DxiChartSeriesComponent');
-        this.setChildren('series', value);
+        this._setChildren('series', value, 'DxiChartSeriesComponent');
     }
 
     @ContentChildren(DxiChartValueAxisComponent)
     get valueAxesChildren(): QueryList<DxiChartValueAxisComponent> {
         return this._getOption('valueAxis');
     }
     set valueAxesChildren(value) {
-        this.setContentChildren('valueAxis', value, 'DxiChartValueAxisComponent');
-        this.setChildren('valueAxis', value);
+        this._setChildren('valueAxis', value, 'DxiChartValueAxisComponent');
     }
 
 
@@ -1484,39 +1480,31 @@ export class DxChartComponent extends DxComponent implements OnDestroy, OnChange
         return this._getOption('annotations');
     }
     set annotationsLegacyChildren(value) {
-        if (this.checkContentChildren('annotations', value, 'DxiAnnotationComponent')) {
-           this.setChildren('annotations', value);
-        }
+        this._setChildren('annotations', value, 'DxiAnnotationComponent');
     }
 
     @ContentChildren(DxiPaneComponent)
     get panesLegacyChildren(): QueryList<DxiPaneComponent> {
         return this._getOption('panes');
     }
     set panesLegacyChildren(value) {
-        if (this.checkContentChildren('panes', value, 'DxiPaneComponent')) {
-           this.setChildren('panes', value);
-        }
+        this._setChildren('panes', value, 'DxiPaneComponent');
     }
 
     @ContentChildren(DxiSeriesComponent)
     get seriesLegacyChildren(): QueryList<DxiSeriesComponent> {
         return this._getOption('series');
     }
     set seriesLegacyChildren(value) {
-        if (this.checkContentChildren('series', value, 'DxiSeriesComponent')) {
-           this.setChildren('series', value);
-        }
+        this._setChildren('series', value, 'DxiSeriesComponent');
     }
 
     @ContentChildren(DxiValueAxisComponent)
     get valueAxisLegacyChildren(): QueryList<DxiValueAxisComponent> {
         return this._getOption('valueAxis');
     }
     set valueAxisLegacyChildren(value) {
-        if (this.checkContentChildren('valueAxis', value, 'DxiValueAxisComponent')) {
-           this.setChildren('valueAxis', value);
-        }
+        this._setChildren('valueAxis', value, 'DxiValueAxisComponent');
     }
 
 

packages/devextreme-angular/src/ui/chat/index.ts

@@ -618,26 +618,23 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
         return this._getOption('alerts');
     }
     set alertsChildren(value) {
-        this.setContentChildren('alerts', value, 'DxiChatAlertComponent');
-        this.setChildren('alerts', value);
+        this._setChildren('alerts', value, 'DxiChatAlertComponent');
     }
 
     @ContentChildren(DxiChatItemComponent)
     get itemsChildren(): QueryList<DxiChatItemComponent> {
         return this._getOption('items');
     }
     set itemsChildren(value) {
-        this.setContentChildren('items', value, 'DxiChatItemComponent');
-        this.setChildren('items', value);
+        this._setChildren('items', value, 'DxiChatItemComponent');
     }
 
     @ContentChildren(DxiChatTypingUserComponent)
     get typingUsersChildren(): QueryList<DxiChatTypingUserComponent> {
         return this._getOption('typingUsers');
     }
     set typingUsersChildren(value) {
-        this.setContentChildren('typingUsers', value, 'DxiChatTypingUserComponent');
-        this.setChildren('typingUsers', value);
+        this._setChildren('typingUsers', value, 'DxiChatTypingUserComponent');
     }
 
 
@@ -646,29 +643,23 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
         return this._getOption('alerts');
     }
     set alertsLegacyChildren(value) {
-        if (this.checkContentChildren('alerts', value, 'DxiAlertComponent')) {
-           this.setChildren('alerts', value);
-        }
+        this._setChildren('alerts', value, 'DxiAlertComponent');
     }
 
     @ContentChildren(DxiItemComponent)
     get itemsLegacyChildren(): QueryList<DxiItemComponent> {
         return this._getOption('items');
     }
     set itemsLegacyChildren(value) {
-        if (this.checkContentChildren('items', value, 'DxiItemComponent')) {
-           this.setChildren('items', value);
-        }
+        this._setChildren('items', value, 'DxiItemComponent');
     }
 
     @ContentChildren(DxiTypingUserComponent)
     get typingUsersLegacyChildren(): QueryList<DxiTypingUserComponent> {
         return this._getOption('typingUsers');
     }
     set typingUsersLegacyChildren(value) {
-        if (this.checkContentChildren('typingUsers', value, 'DxiTypingUserComponent')) {
-           this.setChildren('typingUsers', value);
-        }
+        this._setChildren('typingUsers', value, 'DxiTypingUserComponent');
     }
 
 

packages/devextreme-angular/src/ui/color-box/index.ts

@@ -1111,8 +1111,7 @@ export class DxColorBoxComponent extends DxComponent implements OnDestroy, Contr
         return this._getOption('buttons');
     }
     set buttonsChildren(value) {
-        this.setContentChildren('buttons', value, 'DxiColorBoxButtonComponent');
-        this.setChildren('buttons', value);
+        this._setChildren('buttons', value, 'DxiColorBoxButtonComponent');
     }
 
 
@@ -1121,9 +1120,7 @@ export class DxColorBoxComponent extends DxComponent implements OnDestroy, Contr
         return this._getOption('buttons');
     }
     set buttonsLegacyChildren(value) {
-        if (this.checkContentChildren('buttons', value, 'DxiButtonComponent')) {
-           this.setChildren('buttons', value);
-        }
+        this._setChildren('buttons', value, 'DxiButtonComponent');
     }