diff --git a/package-lock.json b/package-lock.json
index b4637c4..ee92ed6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3382,9 +3382,8 @@
       "dev": true
     },
     "@ucap/ng-ui": {
-      "version": "file:pack/ucap-ng-ui-0.0.3.tgz",
-      "integrity": "sha512-fd9zmOt2/mHM1iIEnST4pr+IUEnKFLkZkvQLBtybOdu1YgdFB1wvsK7Hk+OTuYdUYCGdg31iBoSgTYXZrAJufw==",
-      "dev": true
+      "version": "file:pack/ucap-ng-ui-0.0.4.tgz",
+      "integrity": "sha512-DcrZx55uGvvc70vUxP2fkgQhORMMBgkKWRdG5zH1PpgB4wY1Od887DgFJISEQzbcFNBNr6TiX+I8e64maGQp0A=="
     },
     "@ucap/ng-ui-authentication": {
       "version": "file:pack/ucap-ng-ui-authentication-0.0.16.tgz",
@@ -3398,7 +3397,8 @@
     },
     "@ucap/ng-ui-skin-default": {
       "version": "file:pack/ucap-ng-ui-skin-default-0.0.1.tgz",
-      "integrity": "sha512-vtgJBOsJj/S2GjP02PpBz9ebGikNtzdsC7JQc5HKkCZRC6JKkzZmWzcaFGlLPsh9dcWEeZuNhwnAZfmPXgz6Aw=="
+      "integrity": "sha512-vtgJBOsJj/S2GjP02PpBz9ebGikNtzdsC7JQc5HKkCZRC6JKkzZmWzcaFGlLPsh9dcWEeZuNhwnAZfmPXgz6Aw==",
+      "dev": true
     },
     "@ucap/ng-web-socket": {
       "version": "file:pack/ucap-ng-web-socket-0.0.2.tgz",
diff --git a/package.json b/package.json
index 773cd79..fea8066 100644
--- a/package.json
+++ b/package.json
@@ -179,7 +179,7 @@
     "@ucap/ng-store-chat": "file:pack/ucap-ng-store-chat-0.0.5.tgz",
     "@ucap/ng-store-group": "file:pack/ucap-ng-store-group-0.0.6.tgz",
     "@ucap/ng-store-organization": "file:pack/ucap-ng-store-organization-0.0.4.tgz",
-    "@ucap/ng-ui": "file:pack/ucap-ng-ui-0.0.3.tgz",
+    "@ucap/ng-ui": "file:pack/ucap-ng-ui-0.0.4.tgz",
     "@ucap/ng-ui-authentication": "file:pack/ucap-ng-ui-authentication-0.0.16.tgz",
     "@ucap/ng-ui-organization": "file:pack/ucap-ng-ui-organization-0.0.2.tgz",
     "@ucap/ng-ui-skin-default": "file:pack/ucap-ng-ui-skin-default-0.0.1.tgz",
diff --git a/projects/ui/package.json b/projects/ui/package.json
index 30af4ab..35b2f17 100644
--- a/projects/ui/package.json
+++ b/projects/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ucap/ng-ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "publishConfig": {
     "registry": "http://10.81.13.221:8081/nexus/repository/npm-ucap/"
   },
diff --git a/projects/ui/src/lib/data-source/virtual-scroll-tree-flat.data-source.ts b/projects/ui/src/lib/data-source/virtual-scroll-tree-flat.data-source.ts
index 68c9529..e741306 100644
--- a/projects/ui/src/lib/data-source/virtual-scroll-tree-flat.data-source.ts
+++ b/projects/ui/src/lib/data-source/virtual-scroll-tree-flat.data-source.ts
@@ -14,16 +14,20 @@ import { FlatTreeControl } from '@angular/cdk/tree';
 import { MatTreeFlattener } from '@angular/material/tree';
 
 export class VirtualScrollTreeFlatDataSource<T, F> extends DataSource<F> {
-  private flattenedDataSubject = new BehaviorSubject<F[]>([]);
-
   expandedDataSubject = new BehaviorSubject<F[]>([]);
   expandedData$: Observable<F[]>;
 
-  private connectSubject: Subject<F[]>;
-  private dataChangeSubscription: Subscription;
-  private rangeChangeSubscription: Subscription;
+  // tslint:disable-next-line: variable-name
+  private _flattenedDataSubject = new BehaviorSubject<F[]>([]);
+  // tslint:disable-next-line: variable-name
+  private _connectSubject: Subject<F[]>;
+  // tslint:disable-next-line: variable-name
+  private _dataChangeSubscription: Subscription;
+  // tslint:disable-next-line: variable-name
+  private _rangeChangeSubscription: Subscription;
 
-  private rangeSubject: BehaviorSubject<{
+  // tslint:disable-next-line: variable-name
+  private _rangeSubject: BehaviorSubject<{
     start: number;
     end: number;
   }>;
@@ -37,22 +41,22 @@ export class VirtualScrollTreeFlatDataSource<T, F> extends DataSource<F> {
       return;
     }
     this._cdkVirtualScrollViewport = cdkVirtualScrollViewport;
-    this.rangeSubject = new BehaviorSubject<{ start: number; end: number }>({
+    this._rangeSubject = new BehaviorSubject<{ start: number; end: number }>({
       start: 0,
       end: 1
     });
 
-    this.rangeChangeSubscription = cdkVirtualScrollViewport.renderedRangeStream.subscribe(
-      range => {
-        this.rangeSubject.next({
+    this._rangeChangeSubscription = cdkVirtualScrollViewport.renderedRangeStream.subscribe(
+      (range) => {
+        this._rangeSubject.next({
           start: range.start,
           end: range.end
         });
-        if (!!this.connectSubject) {
-          this.connectSubject.next(
+        if (!!this._connectSubject) {
+          this._connectSubject.next(
             this.expandedDataSubject.value.slice(
-              this.rangeSubject.value.start,
-              this.rangeSubject.value.end
+              this._rangeSubject.value.start,
+              this._rangeSubject.value.end
             )
           );
         }
@@ -67,13 +71,17 @@ export class VirtualScrollTreeFlatDataSource<T, F> extends DataSource<F> {
   }
   set data(value: T[]) {
     this._data.next(value);
-    this.flattenedDataSubject.next(this.treeFlattener.flattenNodes(this.data));
-    this.treeControl.dataNodes = this.flattenedDataSubject.value;
+    this._flattenedDataSubject.next(
+      this._treeFlattener.flattenNodes(this.data)
+    );
+    this._treeControl.dataNodes = this._flattenedDataSubject.value;
   }
 
   constructor(
-    private treeControl: FlatTreeControl<F>,
-    private treeFlattener: MatTreeFlattener<T, F>,
+    // tslint:disable-next-line: variable-name
+    private _treeControl: FlatTreeControl<F>,
+    // tslint:disable-next-line: variable-name
+    private _treeFlattener: MatTreeFlattener<T, F>,
     initialData: T[] = []
   ) {
     super();
@@ -82,52 +90,52 @@ export class VirtualScrollTreeFlatDataSource<T, F> extends DataSource<F> {
   }
 
   connect(collectionViewer: CollectionViewer): Observable<F[]> {
-    this.connectSubject = new Subject<F[]>();
+    this._connectSubject = new Subject<F[]>();
 
-    this.dataChangeSubscription = merge(
+    this._dataChangeSubscription = merge(
       collectionViewer.viewChange,
-      this.treeControl.expansionModel.changed,
-      this.flattenedDataSubject
+      this._treeControl.expansionModel.changed,
+      this._flattenedDataSubject
     )
       .pipe(
         map(() => {
           this.expandedDataSubject.next(
-            this.treeFlattener.expandFlattenedNodes(
-              this.flattenedDataSubject.value,
-              this.treeControl
+            this._treeFlattener.expandFlattenedNodes(
+              this._flattenedDataSubject.value,
+              this._treeControl
             )
           );
 
-          return !this.rangeSubject
+          return !this._rangeSubject
             ? this.expandedDataSubject.value
             : this.expandedDataSubject.value.slice(
-                this.rangeSubject.value.start,
-                this.rangeSubject.value.end
+                this._rangeSubject.value.start,
+                this._rangeSubject.value.end
               );
         })
       )
-      .subscribe(datas => {
-        this.connectSubject.next(datas);
+      .subscribe((datas) => {
+        this._connectSubject.next(datas);
         if (!!this._cdkVirtualScrollViewport) {
           this._cdkVirtualScrollViewport.checkViewportSize();
         }
       });
 
-    return this.connectSubject.asObservable();
+    return this._connectSubject.asObservable();
   }
 
   disconnect() {
-    if (!!this.connectSubject) {
-      this.connectSubject.next();
-      this.connectSubject.unsubscribe();
+    if (!!this._connectSubject) {
+      this._connectSubject.next();
+      this._connectSubject.unsubscribe();
     }
 
-    if (!!this.dataChangeSubscription) {
-      this.dataChangeSubscription.unsubscribe();
+    if (!!this._dataChangeSubscription) {
+      this._dataChangeSubscription.unsubscribe();
     }
 
-    if (!!this.rangeChangeSubscription) {
-      this.rangeChangeSubscription.unsubscribe();
+    if (!!this._rangeChangeSubscription) {
+      this._rangeChangeSubscription.unsubscribe();
     }
   }
 }