From bcdf8ecb58f373f189142457a5eabf0e34e82b57 Mon Sep 17 00:00:00 2001
From: Build Automaion <buildautomation@syncfusion.com>
Date: Tue, 3 Dec 2024 01:20:47 +0530
Subject: [PATCH] Integrated latest changes at 12-02-2024 10:30:17 PM

---
 ej2-angular-toc.html                          |  2 +-
 ej2-angular/Release-notes/27.2.5.md           | 16 +++++
 .../getting-started-cs10/src/app.component.ts |  5 +-
 .../getting-started-cs7/src/app.component.ts  |  5 +-
 .../getting-started-cs8/src/app.component.ts  |  5 +-
 .../getting-started-cs9/src/app.component.ts  |  5 +-
 .../tooltip/ajax-content-cs1/package.json     |  3 +-
 .../ajax-content-cs1/src/app.component.ts     |  6 +-
 .../tree-view/accordion-tree-cs1/index.css    | 30 ---------
 .../tree-view/accordion-tree-cs1/package.json |  3 +-
 .../accordion-tree-cs1/src/app.component.ts   |  7 +--
 .../accordion-tree-cs1/src/styles.css         | 32 +++++++++-
 .../tree-view/auto-hide-icons-cs1/index.css   |  9 ---
 .../auto-hide-icons-cs1/src/styles.css        | 12 +++-
 .../tree-view/customize-cs1/index.css         | 29 ---------
 .../tree-view/customize-cs1/src/styles.css    | 31 +++++++++-
 .../disable-checkbox-cs1/package.json         |  5 +-
 .../disable-checkbox-cs1/src/app.component.ts |  7 +--
 .../tree-view/filtering-cs1/index.css         | 16 -----
 .../tree-view/filtering-cs1/package.json      |  3 +-
 .../filtering-cs1/src/app.component.ts        |  6 +-
 .../tree-view/filtering-cs1/src/styles.css    | 18 +++++-
 .../get-child-nodes-cs1/src/app.component.ts  | 27 ++++----
 .../tree-view/icon-css-cs1/index.css          | 23 -------
 .../tree-view/icon-css-cs1/package.json       |  3 +-
 .../icon-css-cs1/src/app.component.ts         |  7 +--
 .../tree-view/icon-css-cs1/src/styles.css     | 36 ++++++++++-
 .../tree-view/multi-line-tree-cs1/index.css   | 15 -----
 .../multi-line-tree-cs1/package.json          |  3 +-
 .../multi-line-tree-cs1/src/app.component.ts  |  7 +--
 .../multi-line-tree-cs1/src/styles.css        | 17 +++++-
 .../remove-parent-checkbox-cs1/index.css      | 15 -----
 .../remove-parent-checkbox-cs1/src/styles.css | 18 +++++-
 .../restrict-drag-drop-cs1/index.css          | 59 ------------------
 .../restrict-drag-drop-cs1/package.json       |  3 +-
 .../restrict-drag-drop-cs1/src/styles.css     | 61 ++++++++++++++++++-
 .../select-one-child-cs1/package.json         |  3 +-
 .../select-one-child-cs1/src/app.component.ts | 11 ++--
 .../tree-view/sort-tree-cs1/index.css         |  9 ---
 .../sort-tree-cs1/src/app.component.ts        |  6 +-
 .../tree-view/sort-tree-cs1/src/styles.css    | 12 +++-
 ej2-angular/treeview/how-to/accordion-tree.md |  6 +-
 .../auto-hide-show-expand-collapse-icon.md    |  8 ++-
 ...ustomize-the-tree-nodes-based-on-levels.md |  8 ++-
 .../treeview/how-to/filtering-tree-nodes.md   |  6 +-
 .../treeview/how-to/get-dynamic-icon.md       |  6 +-
 .../how-to/hover-multi-line-tree-node.md      |  6 +-
 .../treeview/how-to/remove-parent-checkbox.md |  6 +-
 ...drag-and-drop-for-particular-tree-nodes.md | 10 ++-
 .../treeview/how-to/select-one-child.md       |  6 +-
 50 files changed, 355 insertions(+), 297 deletions(-)
 create mode 100644 ej2-angular/Release-notes/27.2.5.md

diff --git a/ej2-angular-toc.html b/ej2-angular-toc.html
index ad7361c989..01a28424e7 100644
--- a/ej2-angular-toc.html
+++ b/ej2-angular-toc.html
@@ -3088,7 +3088,7 @@
     </ul>
  </li> <li>Release Notes
                 <ul>
-				<li>2024 Volume 3 - 27.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/27.2.4">27.2.4</a></li><li><a href="/ej2-angular/release-notes/27.2.3">27.2.3</a></li><li><a href="/ej2-angular/release-notes/27.1.58">27.1.58</a></li><li><a href="/ej2-angular/release-notes/27.1.57">27.1.57</a></li><li><a href="/ej2-angular/release-notes/27.1.56">27.1.56</a></li><li><a href="/ej2-angular/release-notes/27.1.55">27.1.55</a></li><li><a href="/ej2-angular/release-notes/27.1.53">27.1.53</a></li><li><a href="/ej2-angular/release-notes/27.1.52">27.1.52</a></li><li><a href="/ej2-angular/release-notes/27.1.51">27.1.51</a></li><li><a href="/ej2-angular/release-notes/27.1.50">27.1.50</a></li></ul></li><li><a href="/ej2-angular/release-notes/27.2.2">27.2.2 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/27.1.48">27.1.48 Main Release</a></li></ul></li><li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/26.2.14">26.2.14</a></li><li><a href="/ej2-angular/release-notes/26.2.13">26.2.13</a></li><li><a href="/ej2-angular/release-notes/26.2.12">26.2.12</a></li><li><a href="/ej2-angular/release-notes/26.2.11">26.2.11</a></li><li><a href="/ej2-angular/release-notes/26.2.10">26.2.10</a></li><li><a href="/ej2-angular/release-notes/26.2.9">26.2.9</a></li><li><a href="/ej2-angular/release-notes/26.2.8">26.2.8</a></li><li><a href="/ej2-angular/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-angular/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-angular/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-angular/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-angular/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-angular/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-angular/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-angular/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-angular/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-angular/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-angular/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-angular/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-angular/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-angular/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-angular/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-angular/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-angular/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-angular/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
+				<li>2024 Volume 3 - 27.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/27.2.5">27.2.5</a></li><li><a href="/ej2-angular/release-notes/27.2.4">27.2.4</a></li><li><a href="/ej2-angular/release-notes/27.2.3">27.2.3</a></li><li><a href="/ej2-angular/release-notes/27.1.58">27.1.58</a></li><li><a href="/ej2-angular/release-notes/27.1.57">27.1.57</a></li><li><a href="/ej2-angular/release-notes/27.1.56">27.1.56</a></li><li><a href="/ej2-angular/release-notes/27.1.55">27.1.55</a></li><li><a href="/ej2-angular/release-notes/27.1.53">27.1.53</a></li><li><a href="/ej2-angular/release-notes/27.1.52">27.1.52</a></li><li><a href="/ej2-angular/release-notes/27.1.51">27.1.51</a></li><li><a href="/ej2-angular/release-notes/27.1.50">27.1.50</a></li></ul></li><li><a href="/ej2-angular/release-notes/27.2.2">27.2.2 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/27.1.48">27.1.48 Main Release</a></li></ul></li><li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/26.2.14">26.2.14</a></li><li><a href="/ej2-angular/release-notes/26.2.13">26.2.13</a></li><li><a href="/ej2-angular/release-notes/26.2.12">26.2.12</a></li><li><a href="/ej2-angular/release-notes/26.2.11">26.2.11</a></li><li><a href="/ej2-angular/release-notes/26.2.10">26.2.10</a></li><li><a href="/ej2-angular/release-notes/26.2.9">26.2.9</a></li><li><a href="/ej2-angular/release-notes/26.2.8">26.2.8</a></li><li><a href="/ej2-angular/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-angular/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-angular/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-angular/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-angular/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-angular/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-angular/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-angular/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-angular/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-angular/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-angular/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-angular/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-angular/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-angular/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-angular/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-angular/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-angular/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-angular/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
 				<li>2023 Volume 4 - 24.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/24.2.9">24.2.9</a></li><li><a href="/ej2-angular/release-notes/24.2.8">24.2.8</a></li><li><a href="/ej2-angular/release-notes/24.2.7">24.2.7</a></li><li><a href="/ej2-angular/release-notes/24.2.6">24.2.6</a></li><li><a href="/ej2-angular/release-notes/24.2.5">24.2.5</a></li><li><a href="/ej2-angular/release-notes/24.2.4">24.2.4</a></li><li><a href="/ej2-angular/release-notes/24.1.47">24.1.47</a></li><li><a href="/ej2-angular/release-notes/24.1.46">24.1.46</a></li><li><a href="/ej2-angular/release-notes/24.1.45">24.1.45</a></li><li><a href="/ej2-angular/release-notes/24.1.44">24.1.44</a></li><li><a href="/ej2-angular/release-notes/24.1.43">24.1.43</a></li></ul></li>				<li><a href="/ej2-angular/release-notes/24.2.3">24.2.3 Service Pack Release</a></li>
 				<li><a href="/ej2-angular/release-notes/24.1.41">24.1.41 Main Release</a></li></ul></li>
 				<li>2023 Volume 3 - 23.*<ul><li> Weekly Release<ul><li><a href="/ej2-angular/release-notes/23.2.7">23.2.7</a></li><li><a href="/ej2-angular/release-notes/23.2.6">23.2.6</a></li><li><a href="/ej2-angular/release-notes/23.2.5">23.2.5</a></li><li><a href="/ej2-angular/release-notes/23.1.44">23.1.44</a></li><li><a href="/ej2-angular/release-notes/23.1.43">23.1.43</a></li><li><a href="/ej2-angular/release-notes/23.1.42">23.1.42</a></li><li><a href="/ej2-angular/release-notes/23.1.41">23.1.41</a></li><li><a href="/ej2-angular/release-notes/23.1.40">23.1.40</a></li><li><a href="/ej2-angular/release-notes/23.1.39">23.1.39</a></li><li><a href="/ej2-angular/release-notes/23.1.38">23.1.38</a></li></ul></li>
diff --git a/ej2-angular/Release-notes/27.2.5.md b/ej2-angular/Release-notes/27.2.5.md
new file mode 100644
index 0000000000..db88ccb5ec
--- /dev/null
+++ b/ej2-angular/Release-notes/27.2.5.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Angular Weekly Release Release Notes  
+description: Essential Studio for Angular Weekly Release Release Notes  
+platform: ej2-angular
+documentation: ug
+---
+
+# Essential Studio for Angular  Release Notes  
+
+{% include release-info.html date="December 03, 2024"  version="v27.2.5" %}
+
+{% directory path: _includes/release-notes/v27.2.5 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-angular/code-snippet/multiselect/getting-started-cs10/src/app.component.ts b/ej2-angular/code-snippet/multiselect/getting-started-cs10/src/app.component.ts
index 81f0b0bb73..0acdef0b71 100644
--- a/ej2-angular/code-snippet/multiselect/getting-started-cs10/src/app.component.ts
+++ b/ej2-angular/code-snippet/multiselect/getting-started-cs10/src/app.component.ts
@@ -43,7 +43,10 @@ export class AppComponent {
     //set the height of the popup element
     public popupHeight: string = '250px';
     //Bind the filter event
-    public onFiltering: EmitType<FilteringEventArgs>  =  (e: FilteringEventArgs) => {
+    public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => {
+
+        e.preventDefaultAction = true; // Prevent the default built-in filter.
+
          // load overall data when search key empty.
         if(e.text == '') e.updateData(this.sportsData);
         else{
diff --git a/ej2-angular/code-snippet/multiselect/getting-started-cs7/src/app.component.ts b/ej2-angular/code-snippet/multiselect/getting-started-cs7/src/app.component.ts
index 611a082758..1abf4226d1 100644
--- a/ej2-angular/code-snippet/multiselect/getting-started-cs7/src/app.component.ts
+++ b/ej2-angular/code-snippet/multiselect/getting-started-cs7/src/app.component.ts
@@ -36,7 +36,10 @@ export class AppComponent {
     // set the placeholder to the MultiSelect input
     public placeholder: string = 'Select countries';
     //Bind the filter event
-    public onFiltering: EmitType<FilteringEventArgs>  =  (e: FilteringEventArgs) => {
+    public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => {
+
+        e.preventDefaultAction = true; // Prevent the default built-in filter.
+
         let query = new Query();
         //frame the query based on search string with filter type.
         query = (e.text != "") ? query.where("country", "startswith", e.text, true) : query;
diff --git a/ej2-angular/code-snippet/multiselect/getting-started-cs8/src/app.component.ts b/ej2-angular/code-snippet/multiselect/getting-started-cs8/src/app.component.ts
index 8616d1ff93..90e7c55e20 100644
--- a/ej2-angular/code-snippet/multiselect/getting-started-cs8/src/app.component.ts
+++ b/ej2-angular/code-snippet/multiselect/getting-started-cs8/src/app.component.ts
@@ -41,7 +41,10 @@ export class AppComponent {
     //sort the resulted items
     public sorting: string = 'Ascending';
     //Bind the filter event
-    public onFiltering: EmitType<FilteringEventArgs>  =  (e: FilteringEventArgs) => {
+    public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => {
+
+        e.preventDefaultAction = true; // Prevent the default built-in filter.
+
         // load overall data when search key empty.
         if(e.text == '') e.updateData(this.searchData);
         else{
diff --git a/ej2-angular/code-snippet/multiselect/getting-started-cs9/src/app.component.ts b/ej2-angular/code-snippet/multiselect/getting-started-cs9/src/app.component.ts
index 54f150f943..f2782b0e1f 100644
--- a/ej2-angular/code-snippet/multiselect/getting-started-cs9/src/app.component.ts
+++ b/ej2-angular/code-snippet/multiselect/getting-started-cs9/src/app.component.ts
@@ -41,7 +41,10 @@ export class AppComponent {
     //sort the resulted items
     public sorting: string = 'Ascending';
     //Bind the filter event
-    public onFiltering: EmitType<FilteringEventArgs>  =  (e: FilteringEventArgs) => {
+    public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => {
+
+        e.preventDefaultAction = true; // Prevent the default built-in filter.
+
         // load overall data when search key empty.
         if(e.text == '') e.updateData(this.searchData);
         else{
diff --git a/ej2-angular/code-snippet/tooltip/ajax-content-cs1/package.json b/ej2-angular/code-snippet/tooltip/ajax-content-cs1/package.json
index 1531e7ccb2..88ed9a1890 100644
--- a/ej2-angular/code-snippet/tooltip/ajax-content-cs1/package.json
+++ b/ej2-angular/code-snippet/tooltip/ajax-content-cs1/package.json
@@ -16,6 +16,7 @@
     "@syncfusion/ej2-angular-popups": "*",
     "@syncfusion/ej2-angular-lists": "*",
     "@syncfusion/ej2-base": "*",
+    "@syncfusion/ej2-popups": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@angular/animations": "17.1.2",
     "@angular/common": "17.1.2",
@@ -40,4 +41,4 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "typescript": "5.3.3"
   }
-}
\ No newline at end of file
+}
diff --git a/ej2-angular/code-snippet/tooltip/ajax-content-cs1/src/app.component.ts b/ej2-angular/code-snippet/tooltip/ajax-content-cs1/src/app.component.ts
index bc925938f5..2162df0a42 100644
--- a/ej2-angular/code-snippet/tooltip/ajax-content-cs1/src/app.component.ts
+++ b/ej2-angular/code-snippet/tooltip/ajax-content-cs1/src/app.component.ts
@@ -3,11 +3,7 @@
  */
 
 import { Component, ViewChild, ViewEncapsulation, Inject } from '@angular/core';
-import {
-  TooltipComponent,
-  TooltipModule,
-} from '@syncfusion/ej2-angular-popups';
-import { TooltipEventArgs } from '@syncfusion/ej2-popups';
+import { TooltipComponent, TooltipModule, TooltipEventArgs } from '@syncfusion/ej2-angular-popups';
 import { HttpClient } from '@angular/common/http';
 
 import { ListViewModule } from '@syncfusion/ej2-angular-lists';
diff --git a/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/index.css b/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/index.css
index a1232a1cb2..41bf0e2345 100644
--- a/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/index.css
+++ b/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/index.css
@@ -15,33 +15,3 @@
     width: 350px;
     margin: 0 auto;
 }
-
-#treeparent {
-    display: block;
-    max-width: 350px;
-    max-height: 350px;
-    margin: auto;
-    overflow: auto;
-}
-.accordiontree .e-list-item.e-level-1 > .e-fullrow, .accordiontree .e-list-item.e-level-1.e-active > .e-fullrow,  .accordiontree .e-list-item.e-level-1.e-hover > .e-fullrow , .accordiontree .e-list-item.e-level-1 > .e-fullrow, .accordiontree .e-list-item.e-level-1.e-active.e-hover > .e-fullrow {
-    background-color: darkslateblue;
-    border-color: darkslateblue;
-}
-
-.accordiontree .e-list-item.e-level-1 > .e-text-content .e-list-text, .accordiontree .e-list-item.e-level-1.e-active > .e-text-content .e-list-text,  .accordiontree .e-list-item.e-level-1.e-hover > .e-text-content .e-list-text,  .accordiontree .e-list-item.e-level-1.e-active.e-hover > .e-text-content .e-list-text {
-    color: white;
-    font-size: 16px;
-} 
-.accordiontree .e-list-item.e-level- .e-icons.e-icon-collapsible, .accordiontree .e-list-item.e-level-1 .e-icons.e-icon-collapsible,.accordiontree .e-list-item.e-level-1 .e-icon-expandable {
-    display: none
-}
-
-.accordiontree .e-list-item.e-level-2 > .e-fullrow, .accordiontree .e-list-item.e-level-2.e-active > .e-fullrow,  .accordiontree .e-list-item.e-level-2.e-hover > .e-fullrow , .accordiontree .e-list-item.e-level-2 > .e-fullrow, .accordiontree .e-list-item.e-level-2.e-active.e-hover > .e-fullrow {
-    background-color: white;
-    border-color: white;
-}
-
-.accordiontree .e-list-item.e-level-2 > .e-text-content .e-list-text, .accordiontree .e-list-item.e-level-2.e-active > .e-text-content .e-list-text,  .accordiontree .e-list-item.e-level-2.e-hover > .e-text-content .e-list-text,  .accordiontree .e-list-item.e-level-2.e-active.e-hover > .e-text-content .e-list-text {
-    color: blue;
-    font-size: 14px;
-} 
diff --git a/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/package.json b/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/package.json
index ab9982a53c..55f0c2739e 100644
--- a/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/package.json
+++ b/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/package.json
@@ -18,6 +18,7 @@
     "@syncfusion/ej2-base": "*",
     "@syncfusion/ej2-inputs": "*",
     "@syncfusion/ej2-buttons": "*",
+    "@syncfusion/ej2-navigations": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@angular/animations": "17.1.2",
     "@angular/common": "17.1.2",
@@ -41,4 +42,4 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "typescript": "5.3.3"
   }
-}
\ No newline at end of file
+}
diff --git a/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/src/app.component.ts b/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/src/app.component.ts
index 13a3ae0c1a..c266a590c1 100644
--- a/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/src/app.component.ts
+++ b/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/src/app.component.ts
@@ -2,12 +2,9 @@ import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
-
-
-
-
 import { Component, Inject, ViewChild } from '@angular/core';
-import { TreeViewComponent, NodeSelectEventArgs } from '@syncfusion/ej2-angular-navigations';
+import { NodeSelectEventArgs } from '@syncfusion/ej2-navigations';
+import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
 /**
  * TreeView Accordion sample
  */
diff --git a/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/src/styles.css b/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/src/styles.css
index 580f9ed444..ac6d73d2f3 100644
--- a/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/src/styles.css
+++ b/ej2-angular/code-snippet/tree-view/accordion-tree-cs1/src/styles.css
@@ -3,4 +3,34 @@
 @import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
-@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
\ No newline at end of file
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+
+#treeparent {
+    display: block;
+    max-width: 350px;
+    max-height: 350px;
+    margin: auto;
+    overflow: auto;
+}
+.accordiontree .e-list-item.e-level-1 > .e-fullrow, .accordiontree .e-list-item.e-level-1.e-active > .e-fullrow,  .accordiontree .e-list-item.e-level-1.e-hover > .e-fullrow , .accordiontree .e-list-item.e-level-1 > .e-fullrow, .accordiontree .e-list-item.e-level-1.e-active.e-hover > .e-fullrow {
+    background-color: darkslateblue;
+    border-color: darkslateblue;
+}
+
+.accordiontree .e-list-item.e-level-1 > .e-text-content .e-list-text, .accordiontree .e-list-item.e-level-1.e-active > .e-text-content .e-list-text,  .accordiontree .e-list-item.e-level-1.e-hover > .e-text-content .e-list-text,  .accordiontree .e-list-item.e-level-1.e-active.e-hover > .e-text-content .e-list-text {
+    color: white;
+    font-size: 16px;
+} 
+.accordiontree .e-list-item.e-level- .e-icons.e-icon-collapsible, .accordiontree .e-list-item.e-level-1 .e-icons.e-icon-collapsible,.accordiontree .e-list-item.e-level-1 .e-icon-expandable {
+    display: none
+}
+
+.accordiontree .e-list-item.e-level-2 > .e-fullrow, .accordiontree .e-list-item.e-level-2.e-active > .e-fullrow,  .accordiontree .e-list-item.e-level-2.e-hover > .e-fullrow , .accordiontree .e-list-item.e-level-2 > .e-fullrow, .accordiontree .e-list-item.e-level-2.e-active.e-hover > .e-fullrow {
+    background-color: white;
+    border-color: white;
+}
+
+.accordiontree .e-list-item.e-level-2 > .e-text-content .e-list-text, .accordiontree .e-list-item.e-level-2.e-active > .e-text-content .e-list-text,  .accordiontree .e-list-item.e-level-2.e-hover > .e-text-content .e-list-text,  .accordiontree .e-list-item.e-level-2.e-active.e-hover > .e-text-content .e-list-text {
+    color: blue;
+    font-size: 14px;
+} 
diff --git a/ej2-angular/code-snippet/tree-view/auto-hide-icons-cs1/index.css b/ej2-angular/code-snippet/tree-view/auto-hide-icons-cs1/index.css
index a5627d91a9..6493c9aedf 100644
--- a/ej2-angular/code-snippet/tree-view/auto-hide-icons-cs1/index.css
+++ b/ej2-angular/code-snippet/tree-view/auto-hide-icons-cs1/index.css
@@ -16,12 +16,3 @@
     margin: 0 auto;
 }
 
-#treeparent {
-    display: block;
-    max-width: 350px;
-    max-height: 350px;
-    margin: auto;
-    overflow: auto;
-    border: 1px solid #dddddd;
-    border-radius: 3px;
-}
diff --git a/ej2-angular/code-snippet/tree-view/auto-hide-icons-cs1/src/styles.css b/ej2-angular/code-snippet/tree-view/auto-hide-icons-cs1/src/styles.css
index 580f9ed444..aeed200d28 100644
--- a/ej2-angular/code-snippet/tree-view/auto-hide-icons-cs1/src/styles.css
+++ b/ej2-angular/code-snippet/tree-view/auto-hide-icons-cs1/src/styles.css
@@ -3,4 +3,14 @@
 @import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
-@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
\ No newline at end of file
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+
+#treeparent {
+    display: block;
+    max-width: 350px;
+    max-height: 350px;
+    margin: auto;
+    overflow: auto;
+    border: 1px solid #dddddd;
+    border-radius: 3px;
+}
diff --git a/ej2-angular/code-snippet/tree-view/customize-cs1/index.css b/ej2-angular/code-snippet/tree-view/customize-cs1/index.css
index cb25dc0076..41bf0e2345 100644
--- a/ej2-angular/code-snippet/tree-view/customize-cs1/index.css
+++ b/ej2-angular/code-snippet/tree-view/customize-cs1/index.css
@@ -15,32 +15,3 @@
     width: 350px;
     margin: 0 auto;
 }
-
-#treeparent {
-    display: block;
-    max-width: 400px;
-    max-height: 320px;
-    margin: auto;
-    overflow: auto;
-    border: 1px solid #dddddd;
-    border-radius: 3px;
-}
-
-.details {
-    padding-left: 10px;
-}
-
-/*apply custom css to first level*/
-.mytree .e-level-1 > .e-text-content .e-list-text {
-    font-style: italic;
-}
-
-/*apply custom css to second level*/
-.mytree .e-level-2 > .e-text-content .e-list-text {
-color: darkmagenta;
-}
-
-/*apply custom css to all the leaf nodes*/
-.mytree .e-level-3 > .e-text-content .e-list-text {
-font-weight: bold;
-}
diff --git a/ej2-angular/code-snippet/tree-view/customize-cs1/src/styles.css b/ej2-angular/code-snippet/tree-view/customize-cs1/src/styles.css
index 580f9ed444..4e6bb097d9 100644
--- a/ej2-angular/code-snippet/tree-view/customize-cs1/src/styles.css
+++ b/ej2-angular/code-snippet/tree-view/customize-cs1/src/styles.css
@@ -3,4 +3,33 @@
 @import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
-@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
\ No newline at end of file
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+
+#treeparent {
+    display: block;
+    max-width: 400px;
+    max-height: 320px;
+    margin: auto;
+    overflow: auto;
+    border: 1px solid #dddddd;
+    border-radius: 3px;
+}
+
+.details {
+    padding-left: 10px;
+}
+
+/*apply custom css to first level*/
+.mytree .e-level-1 > .e-text-content .e-list-text {
+    font-style: italic;
+}
+
+/*apply custom css to second level*/
+.mytree .e-level-2 > .e-text-content .e-list-text {
+color: darkmagenta;
+}
+
+/*apply custom css to all the leaf nodes*/
+.mytree .e-level-3 > .e-text-content .e-list-text {
+font-weight: bold;
+}
diff --git a/ej2-angular/code-snippet/tree-view/disable-checkbox-cs1/package.json b/ej2-angular/code-snippet/tree-view/disable-checkbox-cs1/package.json
index ab9982a53c..8235fc983c 100644
--- a/ej2-angular/code-snippet/tree-view/disable-checkbox-cs1/package.json
+++ b/ej2-angular/code-snippet/tree-view/disable-checkbox-cs1/package.json
@@ -17,7 +17,8 @@
     "@syncfusion/ej2-angular-navigations": "*",
     "@syncfusion/ej2-base": "*",
     "@syncfusion/ej2-inputs": "*",
-    "@syncfusion/ej2-buttons": "*",
+    "@syncfusion/ej2-buttons": "*",    
+    "@syncfusion/ej2-navigations": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@angular/animations": "17.1.2",
     "@angular/common": "17.1.2",
@@ -41,4 +42,4 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "typescript": "5.3.3"
   }
-}
\ No newline at end of file
+}
diff --git a/ej2-angular/code-snippet/tree-view/disable-checkbox-cs1/src/app.component.ts b/ej2-angular/code-snippet/tree-view/disable-checkbox-cs1/src/app.component.ts
index fc91145d35..f3ed160684 100644
--- a/ej2-angular/code-snippet/tree-view/disable-checkbox-cs1/src/app.component.ts
+++ b/ej2-angular/code-snippet/tree-view/disable-checkbox-cs1/src/app.component.ts
@@ -1,13 +1,8 @@
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
-import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
-
-
-
-
 import { Component, Inject, ViewChild } from '@angular/core';
-import { TreeViewComponent, DrawNodeEventArgs } from '@syncfusion/ej2-angular-navigations';
+import { TreeViewComponent, TreeViewModule, DrawNodeEventArgs } from '@syncfusion/ej2-angular-navigations';
 /**
  * Treeview Disable check box of parent nodes sample
  */
diff --git a/ej2-angular/code-snippet/tree-view/filtering-cs1/index.css b/ej2-angular/code-snippet/tree-view/filtering-cs1/index.css
index 5940f71802..41bf0e2345 100644
--- a/ej2-angular/code-snippet/tree-view/filtering-cs1/index.css
+++ b/ej2-angular/code-snippet/tree-view/filtering-cs1/index.css
@@ -15,19 +15,3 @@
     width: 350px;
     margin: 0 auto;
 }
-
-#treeparent {
-    width: 225px;
-	min-height: 250px;
-	max-height: auto;
-	border: 1px solid #bbbbbb;
-	margin: 0 auto;
-}
-.e-mask .e-input {
-	border: none;
-	border-bottom: 1px solid #bbbbbb;
-}
-#search{
-    width: 225px;
-    height: 26px;
-}
\ No newline at end of file
diff --git a/ej2-angular/code-snippet/tree-view/filtering-cs1/package.json b/ej2-angular/code-snippet/tree-view/filtering-cs1/package.json
index 93f534d0a1..b37a49a93c 100644
--- a/ej2-angular/code-snippet/tree-view/filtering-cs1/package.json
+++ b/ej2-angular/code-snippet/tree-view/filtering-cs1/package.json
@@ -19,6 +19,7 @@
     "@syncfusion/ej2-base": "*",
     "@syncfusion/ej2-inputs": "*",
     "@syncfusion/ej2-buttons": "*",
+    "@syncfusion/ej2-navigations": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@angular/animations": "17.1.2",
     "@angular/common": "17.1.2",
@@ -42,4 +43,4 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "typescript": "5.3.3"
   }
-}
\ No newline at end of file
+}
diff --git a/ej2-angular/code-snippet/tree-view/filtering-cs1/src/app.component.ts b/ej2-angular/code-snippet/tree-view/filtering-cs1/src/app.component.ts
index 1d7ff5a7fb..4819a96385 100644
--- a/ej2-angular/code-snippet/tree-view/filtering-cs1/src/app.component.ts
+++ b/ej2-angular/code-snippet/tree-view/filtering-cs1/src/app.component.ts
@@ -4,10 +4,8 @@ import { FormsModule } from '@angular/forms'
 import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
 import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs'
 
-
-
-
-import {FieldsSettingsModel, TreeViewComponent} from "@syncfusion/ej2-angular-navigations"
+import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
+import { FieldsSettingsModel } from '@syncfusion/ej2-navigations';
 import {MaskedTextBoxComponent} from "@syncfusion/ej2-angular-inputs"
 import { Component, Inject, ViewChild } from '@angular/core';
 import { DataManager, Query, ReturnOption, Predicate } from '@syncfusion/ej2-data';
diff --git a/ej2-angular/code-snippet/tree-view/filtering-cs1/src/styles.css b/ej2-angular/code-snippet/tree-view/filtering-cs1/src/styles.css
index bb9881a173..8be3f8ef05 100644
--- a/ej2-angular/code-snippet/tree-view/filtering-cs1/src/styles.css
+++ b/ej2-angular/code-snippet/tree-view/filtering-cs1/src/styles.css
@@ -4,4 +4,20 @@
 @import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
-@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
+
+#treeparent {
+    width: 225px;
+	min-height: 250px;
+	max-height: auto;
+	border: 1px solid #bbbbbb;
+	margin: 0 auto;
+}
+.e-mask .e-input {
+	border: none;
+	border-bottom: 1px solid #bbbbbb;
+}
+#search{
+    width: 225px;
+    height: 26px;
+}
diff --git a/ej2-angular/code-snippet/tree-view/get-child-nodes-cs1/src/app.component.ts b/ej2-angular/code-snippet/tree-view/get-child-nodes-cs1/src/app.component.ts
index eedeb7321b..24b635d091 100644
--- a/ej2-angular/code-snippet/tree-view/get-child-nodes-cs1/src/app.component.ts
+++ b/ej2-angular/code-snippet/tree-view/get-child-nodes-cs1/src/app.component.ts
@@ -1,13 +1,8 @@
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
-import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
-
-
-
-
+import { TreeViewModule, TreeViewComponent } from '@syncfusion/ej2-angular-navigations'
 import { Component, Inject, ViewChild } from '@angular/core';
-import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
 /**
  * Treeview sample for getting child details via parent ID
  */
@@ -70,18 +65,20 @@ export class AppComponent {
     @ViewChild ('treevalidate') tree?: TreeViewComponent;
 
     public onCreate(args: any): void {
-        let proxy = this.tree;
+        let proxy = this.tree as TreeViewComponent;
         (document.getElementById("btn") as HTMLElement).addEventListener("click",(event)=>{
             let id = (document.getElementById('Nodes') as HTMLElement | any).value
-            let element= proxy?.element.querySelector('[data-uid="' + id + '"]');
+            let element = proxy?.element.querySelector('[data-uid="' + id + '"]');
             // Gets the child Element
-            let liElements = element?.querySelectorAll('ul li');
-            let arr= [];
-            for (let i = 0; i < (liElements as NodeListOf<Element>).length; i++) {
-                let nodeData= proxy?.getNode((liElements as NodeListOf<Element>)[i]);
-                arr.push(nodeData);
-            }
-            alert(JSON.stringify(arr));
+            if (element != null) {
+                  let liElements = element.querySelectorAll('ul li');
+                  let arr = [];
+                  for (let i = 0; i < (liElements as NodeListOf<Element>).length; i++) {
+                    let nodeData = proxy?.getNode((liElements as NodeListOf<Element>)[i]);
+                    arr.push(nodeData);
+                  }
+                  alert(JSON.stringify(arr));
+                }
         });
     }
 }
diff --git a/ej2-angular/code-snippet/tree-view/icon-css-cs1/index.css b/ej2-angular/code-snippet/tree-view/icon-css-cs1/index.css
index 7be9a6e9e8..41bf0e2345 100644
--- a/ej2-angular/code-snippet/tree-view/icon-css-cs1/index.css
+++ b/ej2-angular/code-snippet/tree-view/icon-css-cs1/index.css
@@ -15,26 +15,3 @@
     width: 350px;
     margin: 0 auto;
 }
-
-#treeparent {
-    display: block;
-    max-width: 400px;
-    max-height: 320px;
-    margin: auto;
-    overflow: auto;
-    border: 1px solid #dddddd;
-    border-radius: 3px;
-}
-.e-treeview .e-list-img {
-    width: 25px;
-    height: 25px;
-  }
-  .e-treeview .e-list-icon {
-    background-repeat: no-repeat;
-    background-image: url(https://ej2.syncfusion.com/javascript/demos/src/treeview/images/icons/file_icons.png);
-    height: 20px;
-  }
-  .e-treeview .e-list-icon.folder { background-position: -10px -552px }
-  .e-treeview .e-list-icon.audio { background-position: -10px -244px }
-  .e-treeview .e-list-icon.video { background-position: -10px -272px }
-  
\ No newline at end of file
diff --git a/ej2-angular/code-snippet/tree-view/icon-css-cs1/package.json b/ej2-angular/code-snippet/tree-view/icon-css-cs1/package.json
index 55de7e8a30..9ea648fd9e 100644
--- a/ej2-angular/code-snippet/tree-view/icon-css-cs1/package.json
+++ b/ej2-angular/code-snippet/tree-view/icon-css-cs1/package.json
@@ -18,6 +18,7 @@
     "@syncfusion/ej2-base": "*",
     "@syncfusion/ej2-inputs": "*",
     "@syncfusion/ej2-buttons": "*",
+    "@syncfusion/ej2-navigations": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@syncfusion/ej2-angular-inputs": "*",
     "@angular/animations": "17.1.2",
@@ -42,4 +43,4 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "typescript": "5.3.3"
   }
-}
\ No newline at end of file
+}
diff --git a/ej2-angular/code-snippet/tree-view/icon-css-cs1/src/app.component.ts b/ej2-angular/code-snippet/tree-view/icon-css-cs1/src/app.component.ts
index 1a9907a63f..7a13167fba 100644
--- a/ej2-angular/code-snippet/tree-view/icon-css-cs1/src/app.component.ts
+++ b/ej2-angular/code-snippet/tree-view/icon-css-cs1/src/app.component.ts
@@ -2,12 +2,9 @@ import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
-
-
-
-
 import { Component, Inject, ViewChild } from '@angular/core';
-import { NodeCheckEventArgs, TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
+import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
+import { NodeCheckEventArgs } from '@syncfusion/ej2-navigations';
 /**
  * Icon css sample
  */
diff --git a/ej2-angular/code-snippet/tree-view/icon-css-cs1/src/styles.css b/ej2-angular/code-snippet/tree-view/icon-css-cs1/src/styles.css
index bb9881a173..eb806666a6 100644
--- a/ej2-angular/code-snippet/tree-view/icon-css-cs1/src/styles.css
+++ b/ej2-angular/code-snippet/tree-view/icon-css-cs1/src/styles.css
@@ -4,4 +4,38 @@
 @import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
-@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
+
+#treeparent {
+    display: block;
+    max-width: 400px;
+    max-height: 320px;
+    margin: auto;
+    overflow: auto;
+    border: 1px solid #dddddd;
+    border-radius: 3px;
+}
+
+.e-treeview .e-list-img {
+    width: 25px;
+    height: 25px;
+  }
+
+  .e-treeview .e-list-icon {
+    background-repeat: no-repeat;
+    background-image: url(https://ej2.syncfusion.com/javascript/demos/src/treeview/images/icons/file_icons.png);
+    height: 20px;
+  }
+
+  .e-treeview .e-list-icon.folder {
+    background-position: -10px -552px 
+  }
+
+  .e-treeview .e-list-icon.audio {
+    background-position: -10px -244px
+  }
+
+  .e-treeview .e-list-icon.video {
+    background-position: -10px -272px
+  }
+  
diff --git a/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/index.css b/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/index.css
index 4512748f8c..41bf0e2345 100644
--- a/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/index.css
+++ b/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/index.css
@@ -15,18 +15,3 @@
     width: 350px;
     margin: 0 auto;
 }
-
-#treeparent {
-    display: block;
-    max-width: 400px;
-    max-height: 320px;
-    margin: auto;
-    overflow: auto;
-    border: 1px solid #dddddd;
-    border-radius: 3px;
-}
-
-.customTree li .e-list-text{
-    white-space: normal;
-    word-break: break-all;
-  }
\ No newline at end of file
diff --git a/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/package.json b/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/package.json
index 55de7e8a30..9ea648fd9e 100644
--- a/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/package.json
+++ b/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/package.json
@@ -18,6 +18,7 @@
     "@syncfusion/ej2-base": "*",
     "@syncfusion/ej2-inputs": "*",
     "@syncfusion/ej2-buttons": "*",
+    "@syncfusion/ej2-navigations": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@syncfusion/ej2-angular-inputs": "*",
     "@angular/animations": "17.1.2",
@@ -42,4 +43,4 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "typescript": "5.3.3"
   }
-}
\ No newline at end of file
+}
diff --git a/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/src/app.component.ts b/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/src/app.component.ts
index 46f04e43e2..c40025131a 100644
--- a/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/src/app.component.ts
+++ b/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/src/app.component.ts
@@ -2,12 +2,9 @@ import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
-
-
-
-
 import { Component, Inject, ViewChild } from '@angular/core';
-import { TreeViewComponent, NodeSelectEventArgs } from '@syncfusion/ej2-angular-navigations';
+import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
+import { NodeSelectEventArgs } from '@syncfusion/ej2-navigations';
 /**
  * Hovering multiple line treeview
  */
diff --git a/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/src/styles.css b/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/src/styles.css
index bb9881a173..751f1686c9 100644
--- a/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/src/styles.css
+++ b/ej2-angular/code-snippet/tree-view/multi-line-tree-cs1/src/styles.css
@@ -4,4 +4,19 @@
 @import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
-@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
+
+#treeparent {
+    display: block;
+    max-width: 400px;
+    max-height: 320px;
+    margin: auto;
+    overflow: auto;
+    border: 1px solid #dddddd;
+    border-radius: 3px;
+}
+
+.customTree li .e-list-text{
+    white-space: normal;
+    word-break: break-all;
+  }
diff --git a/ej2-angular/code-snippet/tree-view/remove-parent-checkbox-cs1/index.css b/ej2-angular/code-snippet/tree-view/remove-parent-checkbox-cs1/index.css
index 7f3674d0c9..41bf0e2345 100644
--- a/ej2-angular/code-snippet/tree-view/remove-parent-checkbox-cs1/index.css
+++ b/ej2-angular/code-snippet/tree-view/remove-parent-checkbox-cs1/index.css
@@ -15,18 +15,3 @@
     width: 350px;
     margin: 0 auto;
 }
-
-#treeparent {
-    display: block;
-    max-width: 400px;
-    max-height: 320px;
-    margin: auto;
-    overflow: auto;
-    border: 1px solid #dddddd;
-    border-radius: 3px;
-}
-
-.custom .e-list-item.e-level-1 .e-text-content.e-icon-wrapper
-  .e-checkbox-wrapper {
-        display: none
-    }
\ No newline at end of file
diff --git a/ej2-angular/code-snippet/tree-view/remove-parent-checkbox-cs1/src/styles.css b/ej2-angular/code-snippet/tree-view/remove-parent-checkbox-cs1/src/styles.css
index bb9881a173..b1e4516786 100644
--- a/ej2-angular/code-snippet/tree-view/remove-parent-checkbox-cs1/src/styles.css
+++ b/ej2-angular/code-snippet/tree-view/remove-parent-checkbox-cs1/src/styles.css
@@ -4,4 +4,20 @@
 @import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
-@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
+
+
+#treeparent {
+    display: block;
+    max-width: 400px;
+    max-height: 320px;
+    margin: auto;
+    overflow: auto;
+    border: 1px solid #dddddd;
+    border-radius: 3px;
+}
+
+.custom .e-list-item.e-level-1 .e-text-content.e-icon-wrapper
+  .e-checkbox-wrapper {
+        display: none
+    }
diff --git a/ej2-angular/code-snippet/tree-view/restrict-drag-drop-cs1/index.css b/ej2-angular/code-snippet/tree-view/restrict-drag-drop-cs1/index.css
index 48f84e73d6..41bf0e2345 100644
--- a/ej2-angular/code-snippet/tree-view/restrict-drag-drop-cs1/index.css
+++ b/ej2-angular/code-snippet/tree-view/restrict-drag-drop-cs1/index.css
@@ -15,62 +15,3 @@
     width: 350px;
     margin: 0 auto;
 }
-
-#treeparent {
-    display: block;
-    max-width: 400px;
-    max-height: 320px;
-    margin: auto;
-    overflow: auto;
-    border: 1px solid #dddddd;
-    border-radius: 3px;
-}
-
-.e-treeview .e-list-img {
-    width: 25px;
-    height: 25px;
-}
-
-/* Loading sprite image for TreeView */
-.e-treeview .e-list-icon {
-    background-repeat: no-repeat;
-    background-image: url(https://ej2.syncfusion.com/demos/src/treeview/images/icons/file_icons.png);
-    height: 20px;
-}
-
-/* Specify the icon positions based upon class name */
-.e-treeview .e-list-icon.folder {
-    background-position: -10px -552px;
-}
-
-.e-treeview .e-list-icon.docx {
-    background-position: -10px -20px;
-}
-
-.e-treeview .e-list-icon.ppt {
-    background-position: -10px -48px;
-}
-
-.e-treeview .e-list-icon.pdf {
-    background-position: -10px -104px;
-}
-
-.e-treeview .e-list-icon.images {
-    background-position: -10px -132px;
-}
-
-.e-treeview .e-list-icon.zip {
-    background-position: -10px -188px;
-}
-
-.e-treeview .e-list-icon.audio {
-    background-position: -10px -244px;
-}
-
-.e-treeview .e-list-icon.video {
-    background-position: -10px -272px;
-}
-
-.e-treeview .e-list-icon.exe {
-    background-position: -10px -412px;
-}
diff --git a/ej2-angular/code-snippet/tree-view/restrict-drag-drop-cs1/package.json b/ej2-angular/code-snippet/tree-view/restrict-drag-drop-cs1/package.json
index 55de7e8a30..9ea648fd9e 100644
--- a/ej2-angular/code-snippet/tree-view/restrict-drag-drop-cs1/package.json
+++ b/ej2-angular/code-snippet/tree-view/restrict-drag-drop-cs1/package.json
@@ -18,6 +18,7 @@
     "@syncfusion/ej2-base": "*",
     "@syncfusion/ej2-inputs": "*",
     "@syncfusion/ej2-buttons": "*",
+    "@syncfusion/ej2-navigations": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@syncfusion/ej2-angular-inputs": "*",
     "@angular/animations": "17.1.2",
@@ -42,4 +43,4 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "typescript": "5.3.3"
   }
-}
\ No newline at end of file
+}
diff --git a/ej2-angular/code-snippet/tree-view/restrict-drag-drop-cs1/src/styles.css b/ej2-angular/code-snippet/tree-view/restrict-drag-drop-cs1/src/styles.css
index bb9881a173..8d5b37ccfb 100644
--- a/ej2-angular/code-snippet/tree-view/restrict-drag-drop-cs1/src/styles.css
+++ b/ej2-angular/code-snippet/tree-view/restrict-drag-drop-cs1/src/styles.css
@@ -4,4 +4,63 @@
 @import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
-@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
+
+#treeparent {
+    display: block;
+    max-width: 400px;
+    max-height: 320px;
+    margin: auto;
+    overflow: auto;
+    border: 1px solid #dddddd;
+    border-radius: 3px;
+}
+
+.e-treeview .e-list-img {
+    width: 25px;
+    height: 25px;
+}
+
+/* Loading sprite image for TreeView */
+.e-treeview .e-list-icon {
+    background-repeat: no-repeat;
+    background-image: url(https://ej2.syncfusion.com/demos/src/treeview/images/icons/file_icons.png);
+    height: 20px;
+}
+
+/* Specify the icon positions based upon class name */
+.e-treeview .e-list-icon.folder {
+    background-position: -10px -552px;
+}
+
+.e-treeview .e-list-icon.docx {
+    background-position: -10px -20px;
+}
+
+.e-treeview .e-list-icon.ppt {
+    background-position: -10px -48px;
+}
+
+.e-treeview .e-list-icon.pdf {
+    background-position: -10px -104px;
+}
+
+.e-treeview .e-list-icon.images {
+    background-position: -10px -132px;
+}
+
+.e-treeview .e-list-icon.zip {
+    background-position: -10px -188px;
+}
+
+.e-treeview .e-list-icon.audio {
+    background-position: -10px -244px;
+}
+
+.e-treeview .e-list-icon.video {
+    background-position: -10px -272px;
+}
+
+.e-treeview .e-list-icon.exe {
+    background-position: -10px -412px;
+}
diff --git a/ej2-angular/code-snippet/tree-view/select-one-child-cs1/package.json b/ej2-angular/code-snippet/tree-view/select-one-child-cs1/package.json
index 55de7e8a30..9ea648fd9e 100644
--- a/ej2-angular/code-snippet/tree-view/select-one-child-cs1/package.json
+++ b/ej2-angular/code-snippet/tree-view/select-one-child-cs1/package.json
@@ -18,6 +18,7 @@
     "@syncfusion/ej2-base": "*",
     "@syncfusion/ej2-inputs": "*",
     "@syncfusion/ej2-buttons": "*",
+    "@syncfusion/ej2-navigations": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@syncfusion/ej2-angular-inputs": "*",
     "@angular/animations": "17.1.2",
@@ -42,4 +43,4 @@
     "karma-jasmine-html-reporter": "2.0.0",
     "typescript": "5.3.3"
   }
-}
\ No newline at end of file
+}
diff --git a/ej2-angular/code-snippet/tree-view/select-one-child-cs1/src/app.component.ts b/ej2-angular/code-snippet/tree-view/select-one-child-cs1/src/app.component.ts
index f21de2aaba..860801e56c 100644
--- a/ej2-angular/code-snippet/tree-view/select-one-child-cs1/src/app.component.ts
+++ b/ej2-angular/code-snippet/tree-view/select-one-child-cs1/src/app.component.ts
@@ -2,12 +2,9 @@ import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
-
-
-
-
 import { Component, Inject, ViewChild } from '@angular/core';
-import { TreeViewComponent, NodeSelectEventArgs } from '@syncfusion/ej2-angular-navigations';
+import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
+import { NodeSelectEventArgs } from '@syncfusion/ej2-navigations';
 /**
  * Single child selection at a time
  */
@@ -54,10 +51,10 @@ export class AppComponent {
        this.childCount = true
     }
     if (id != null && id === this.parent) {
-      let element: HTMLElement = this.tree?.element.querySelector('[data-uid="' + id + '"]') as HTMLElement;
+      let element: HTMLElement = (this.tree as any).element.querySelector('[data-uid="' + id + '"]') as HTMLElement;
       let liElements: any = element.querySelectorAll('ul li');
       for (let i: number = 0; i < liElements.length; i++) {
-        let nodeData: any = this.tree?.getNode(liElements[i]);
+        let nodeData: any = (this.tree as any).getNode(liElements[i]);
         if (nodeData.selected && args.action === "select" && this.child !== args.nodeData['id']) {
           args.cancel = true;
         }
diff --git a/ej2-angular/code-snippet/tree-view/sort-tree-cs1/index.css b/ej2-angular/code-snippet/tree-view/sort-tree-cs1/index.css
index 524a69ec2d..6493c9aedf 100644
--- a/ej2-angular/code-snippet/tree-view/sort-tree-cs1/index.css
+++ b/ej2-angular/code-snippet/tree-view/sort-tree-cs1/index.css
@@ -16,12 +16,3 @@
     margin: 0 auto;
 }
 
-#treeparent {
-    display: block;
-    max-width: 400px;
-    max-height: 320px;
-    margin: auto;
-    overflow: auto;
-    border: 1px solid #dddddd;
-    border-radius: 3px;
-}
diff --git a/ej2-angular/code-snippet/tree-view/sort-tree-cs1/src/app.component.ts b/ej2-angular/code-snippet/tree-view/sort-tree-cs1/src/app.component.ts
index 1506e366a5..d425464b77 100644
--- a/ej2-angular/code-snippet/tree-view/sort-tree-cs1/src/app.component.ts
+++ b/ej2-angular/code-snippet/tree-view/sort-tree-cs1/src/app.component.ts
@@ -3,11 +3,9 @@ import { BrowserModule } from '@angular/platform-browser'
 import { FormsModule } from '@angular/forms'
 import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
 
-
-
-
 import { Component, Inject, ViewChild } from '@angular/core';
-import { TreeViewComponent, NodeExpandEventArgs, FieldsSettingsModel } from '@syncfusion/ej2-angular-navigations';
+import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
+import { NodeExpandEventArgs, FieldsSettingsModel } from '@syncfusion/ej2-navigations';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 /**
  * Treeview Disable check box of parent nodes sample
diff --git a/ej2-angular/code-snippet/tree-view/sort-tree-cs1/src/styles.css b/ej2-angular/code-snippet/tree-view/sort-tree-cs1/src/styles.css
index bb9881a173..00803041f0 100644
--- a/ej2-angular/code-snippet/tree-view/sort-tree-cs1/src/styles.css
+++ b/ej2-angular/code-snippet/tree-view/sort-tree-cs1/src/styles.css
@@ -4,4 +4,14 @@
 @import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
-@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
\ No newline at end of file
+@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
+
+#treeparent {
+    display: block;
+    max-width: 400px;
+    max-height: 320px;
+    margin: auto;
+    overflow: auto;
+    border: 1px solid #dddddd;
+    border-radius: 3px;
+}
diff --git a/ej2-angular/treeview/how-to/accordion-tree.md b/ej2-angular/treeview/how-to/accordion-tree.md
index f83d5846da..07e78aa9e6 100644
--- a/ej2-angular/treeview/how-to/accordion-tree.md
+++ b/ej2-angular/treeview/how-to/accordion-tree.md
@@ -17,9 +17,13 @@ Accordion is an interface where a list of items can be collapsed or expanded, bu
 {% include code-snippet/tree-view/accordion-tree-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="styles.css" %}
+{% include code-snippet/tree-view/accordion-tree-cs1/src/styles.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/tree-view/accordion-tree-cs1/src/main.ts %}
 {% endhighlight %}
 {% endtabs %}
   
-{% previewsample "page.domainurl/samples/tree-view/accordion-tree-cs1" %}
\ No newline at end of file
+{% previewsample "page.domainurl/samples/tree-view/accordion-tree-cs1" %}
diff --git a/ej2-angular/treeview/how-to/auto-hide-show-expand-collapse-icon.md b/ej2-angular/treeview/how-to/auto-hide-show-expand-collapse-icon.md
index 1cefdc6e47..6bfc3496b6 100644
--- a/ej2-angular/treeview/how-to/auto-hide-show-expand-collapse-icon.md
+++ b/ej2-angular/treeview/how-to/auto-hide-show-expand-collapse-icon.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Auto hide show expand collapse icon in Angular Treeview component | Syncfusion
+title: Hide expand/collapse icons in Angular TreeView component | Syncfusion
 description: Learn here all about Auto hide show expand collapse icon in Syncfusion Angular Treeview component of Syncfusion Essential JS 2 and more.
 platform: ej2-angular
 control: Auto hide show expand collapse icon 
@@ -17,9 +17,13 @@ You can display the expand icon by hovering the mouse over TreeView and hide the
 {% include code-snippet/tree-view/auto-hide-icons-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="styles.css" %}
+{% include code-snippet/tree-view/auto-hide-icons-cs1/src/styles.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/tree-view/auto-hide-icons-cs1/src/main.ts %}
 {% endhighlight %}
 {% endtabs %}
   
-{% previewsample "page.domainurl/samples/tree-view/auto-hide-icons-cs1" %}
\ No newline at end of file
+{% previewsample "page.domainurl/samples/tree-view/auto-hide-icons-cs1" %}
diff --git a/ej2-angular/treeview/how-to/customize-the-tree-nodes-based-on-levels.md b/ej2-angular/treeview/how-to/customize-the-tree-nodes-based-on-levels.md
index 498d2c5f07..3b7b0285e6 100644
--- a/ej2-angular/treeview/how-to/customize-the-tree-nodes-based-on-levels.md
+++ b/ej2-angular/treeview/how-to/customize-the-tree-nodes-based-on-levels.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Customize the tree nodes based on levels in Angular Treeview component | Syncfusion
+title: Customize tree node levels in Angular TreeView component | Syncfusion
 description: Learn here all about Customize the tree nodes based on levels in Syncfusion Angular Treeview component of Syncfusion Essential JS 2 and more.
 platform: ej2-angular
 control: Customize the tree nodes based on levels 
@@ -17,9 +17,13 @@ You can customize the tree nodes level wise by adding custom cssClass to the com
 {% include code-snippet/tree-view/customize-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="styles.css" %}
+{% include code-snippet/tree-view/customize-cs1/src/styles.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/tree-view/customize-cs1/src/main.ts %}
 {% endhighlight %}
 {% endtabs %}
   
-{% previewsample "page.domainurl/samples/tree-view/customize-cs1" %}
\ No newline at end of file
+{% previewsample "page.domainurl/samples/tree-view/customize-cs1" %}
diff --git a/ej2-angular/treeview/how-to/filtering-tree-nodes.md b/ej2-angular/treeview/how-to/filtering-tree-nodes.md
index a10b2e3b8c..3a5c0b1338 100644
--- a/ej2-angular/treeview/how-to/filtering-tree-nodes.md
+++ b/ej2-angular/treeview/how-to/filtering-tree-nodes.md
@@ -19,9 +19,13 @@ The following code example demonstrates how to filter the tree nodes in a TreeVi
 {% include code-snippet/tree-view/filtering-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="styles.css" %}
+{% include code-snippet/tree-view/filtering-cs1/src/styles.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/tree-view/filtering-cs1/src/main.ts %}
 {% endhighlight %}
 {% endtabs %}
   
-{% previewsample "page.domainurl/samples/tree-view/filtering-cs1" %}
\ No newline at end of file
+{% previewsample "page.domainurl/samples/tree-view/filtering-cs1" %}
diff --git a/ej2-angular/treeview/how-to/get-dynamic-icon.md b/ej2-angular/treeview/how-to/get-dynamic-icon.md
index 87a599640f..d51ff255f9 100644
--- a/ej2-angular/treeview/how-to/get-dynamic-icon.md
+++ b/ej2-angular/treeview/how-to/get-dynamic-icon.md
@@ -17,9 +17,13 @@ In TreeView component, you can get the original bound data using the `getTreeDat
 {% include code-snippet/tree-view/icon-css-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="styles.css" %}
+{% include code-snippet/tree-view/icon-css-cs1/src/styles.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/tree-view/icon-css-cs1/src/main.ts %}
 {% endhighlight %}
 {% endtabs %}
   
-{% previewsample "page.domainurl/samples/tree-view/icon-css-cs1" %}
\ No newline at end of file
+{% previewsample "page.domainurl/samples/tree-view/icon-css-cs1" %}
diff --git a/ej2-angular/treeview/how-to/hover-multi-line-tree-node.md b/ej2-angular/treeview/how-to/hover-multi-line-tree-node.md
index 9b0b83bb60..e07837a218 100644
--- a/ej2-angular/treeview/how-to/hover-multi-line-tree-node.md
+++ b/ej2-angular/treeview/how-to/hover-multi-line-tree-node.md
@@ -17,9 +17,13 @@ This section demonstrates how to hover and select a multi-line tree node. Here,
 {% include code-snippet/tree-view/multi-line-tree-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="styles.css" %}
+{% include code-snippet/tree-view/multi-line-tree-cs1/src/styles.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/tree-view/multi-line-tree-cs1/src/main.ts %}
 {% endhighlight %}
 {% endtabs %}
   
-{% previewsample "page.domainurl/samples/tree-view/multi-line-tree-cs1" %}
\ No newline at end of file
+{% previewsample "page.domainurl/samples/tree-view/multi-line-tree-cs1" %}
diff --git a/ej2-angular/treeview/how-to/remove-parent-checkbox.md b/ej2-angular/treeview/how-to/remove-parent-checkbox.md
index b56032347d..6ebf083030 100644
--- a/ej2-angular/treeview/how-to/remove-parent-checkbox.md
+++ b/ej2-angular/treeview/how-to/remove-parent-checkbox.md
@@ -17,9 +17,13 @@ By enabling the `showCheckBox` property, you can render check box before each no
 {% include code-snippet/tree-view/remove-parent-checkbox-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="styles.css" %}
+{% include code-snippet/tree-view/remove-parent-checkbox-cs1/src/styles.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/tree-view/remove-parent-checkbox-cs1/src/main.ts %}
 {% endhighlight %}
 {% endtabs %}
   
-{% previewsample "page.domainurl/samples/tree-view/remove-parent-checkbox-cs1" %}
\ No newline at end of file
+{% previewsample "page.domainurl/samples/tree-view/remove-parent-checkbox-cs1" %}
diff --git a/ej2-angular/treeview/how-to/restrict-the-drag-and-drop-for-particular-tree-nodes.md b/ej2-angular/treeview/how-to/restrict-the-drag-and-drop-for-particular-tree-nodes.md
index 377470ec53..51cd44337c 100644
--- a/ej2-angular/treeview/how-to/restrict-the-drag-and-drop-for-particular-tree-nodes.md
+++ b/ej2-angular/treeview/how-to/restrict-the-drag-and-drop-for-particular-tree-nodes.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Restrict the drag and drop for particular tree nodes in Angular Treeview component | Syncfusion
+title: Restrict drag-and-drop in Angular TreeView Component | Syncfusion
 description: Learn here all about Restrict the drag and drop for particular tree nodes in Syncfusion Angular Treeview component of Syncfusion Essential JS 2 and more.
 platform: ej2-angular
 control: Restrict the drag and drop for particular tree nodes 
@@ -8,7 +8,7 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Restrict the drag and drop for particular tree nodes in Angular Treeview component
+# Restrict drag and drop nodes in Angular Treeview component
 
 You can able to restrict to drag and drop files under folder only.
 These can be achieved by using 'nodeDragStop' and 'nodeDragging' event of TreeView.
@@ -18,9 +18,13 @@ These can be achieved by using 'nodeDragStop' and 'nodeDragging' event of TreeVi
 {% include code-snippet/tree-view/restrict-drag-drop-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="styles.css" %}
+{% include code-snippet/tree-view/restrict-drag-drop-cs1/src/styles.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/tree-view/restrict-drag-drop-cs1/src/main.ts %}
 {% endhighlight %}
 {% endtabs %}
   
-{% previewsample "page.domainurl/samples/tree-view/restrict-drag-drop-cs1" %}
\ No newline at end of file
+{% previewsample "page.domainurl/samples/tree-view/restrict-drag-drop-cs1" %}
diff --git a/ej2-angular/treeview/how-to/select-one-child.md b/ej2-angular/treeview/how-to/select-one-child.md
index b9b71892eb..7f6bdee3fd 100644
--- a/ej2-angular/treeview/how-to/select-one-child.md
+++ b/ej2-angular/treeview/how-to/select-one-child.md
@@ -17,9 +17,13 @@ TreeView allows both single and multiple selections. If your application needs t
 {% include code-snippet/tree-view/select-one-child-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="styles.css" %}
+{% include code-snippet/tree-view/select-one-child-cs1/src/styles.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/tree-view/select-one-child-cs1/src/main.ts %}
 {% endhighlight %}
 {% endtabs %}
   
-{% previewsample "page.domainurl/samples/tree-view/select-one-child-cs1" %}
\ No newline at end of file
+{% previewsample "page.domainurl/samples/tree-view/select-one-child-cs1" %}