syncfusion-content · SyncfusionBuild · Dec 9, 2024 · Dec 8, 2024
diff --git a/ej2-angular/avatar/getting-started.md b/ej2-angular/avatar/getting-started.md
@@ -49,7 +49,7 @@ The `Avatar` component is pure CSS component which doesn't need specific depende
 Syncfusion packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion package from npm [link]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ).
 
 Currently, Syncfusion provides two types of package structures for Angular components,
-1. Ivy library distribution package [format](https://angular.io/guide/angular-package-format#angular-package-format)
+1. Ivy library distribution package [format](https://v17.angular.io/guide/angular-package-format#angular-package-format)
 2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.
 
 ### Ivy library distribution package
@@ -85,9 +85,9 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w
 To render the Avatar component, import the Avatar and its dependent component's styles as given below in `[src/styles.css]`.
 
 ```css
-@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
-@import '../../node_modules/@syncfusion/ej2-layouts/styles/material.css';
-@import "../../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css";
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';
 ```
 
 >Note: To refer the combined component styles, use Syncfusion [`CRG`](https://crg.syncfusion.com/) (Custom Resource Generator) in your application.
@@ -102,7 +102,7 @@ Modify the `template` in `app.component.ts` file to render Avatar component.
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'my-app',
+    selector: 'app-root',
     template: `<div id='element'><span class="e-avatar">GR</span></div>`
 })
 
@@ -124,6 +124,10 @@ The following example shows a basic Avatar component.
 {% include code-snippet/avatar/getting-started-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="styles.css" %}
+{% include code-snippet/avatar/getting-started-cs1/src/styles.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/avatar/getting-started-cs1/src/main.ts %}
 {% endhighlight %}

diff --git a/ej2-angular/badge/getting-started.md b/ej2-angular/badge/getting-started.md
@@ -130,8 +130,8 @@ The following example shows a basic badge component.
 {% include code-snippet/badge/getting-started-cs1/src/app.component.ts %}
 {% endhighlight %}
 
-{% highlight ts tabtitle="styles.css" %}
-{% include code-snippet/badge/getting-started-cs1/src/styles.css %}
+{% highlight ts tabtitle="app.component.css" %}
+{% include code-snippet/badge/getting-started-cs1/src/app.component.css %}
 {% endhighlight %}
 
 {% highlight ts tabtitle="main.ts" %}

diff --git a/ej2-angular/code-snippet/avatar/getting-started-cs1/index.css b/ej2-angular/code-snippet/avatar/getting-started-cs1/index.css
@@ -1,25 +0,0 @@
-#container {
-    visibility: hidden;
-}
-
-#loader {
-    color: #008cff;
-    height: 40px;
-    left: 45%;
-    position: absolute;
-    top: 45%;
-    width: 30%;
-}
-
-#element {
-    display: block;
-    width: 300px;
-    margin: 130px auto;
-    border-radius: 3px;
-    justify-content: center;
-}
-
-.e-avatar {
-    background-image: url(./pic01.png);
-    margin: 2px;
-}

diff --git a/ej2-angular/code-snippet/avatar/getting-started-cs1/package.json b/ej2-angular/code-snippet/avatar/getting-started-cs1/package.json
@@ -15,6 +15,7 @@
     "@angular/platform-browser-dynamic": "17.1.2",
     "@syncfusion/ej2-base": "*",
     "@syncfusion/ej2-layouts": "*",
+    "@syncfusion/ej2-angular-layouts": "*",
     "@angular/animations": "17.1.2",
     "@angular/common": "17.1.2",
     "@angular/compiler": "17.1.2",

diff --git a/ej2-angular/code-snippet/avatar/getting-started-cs1/src/styles.css b/ej2-angular/code-snippet/avatar/getting-started-cs1/src/styles.css
@@ -1,5 +1,5 @@
-@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
-@import 'node_modules/@syncfusion/ej2-layouts/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
 
 
 #loader {

diff --git a/ej2-angular/code-snippet/badge/getting-started-cs1/src/app.component.css b/ej2-angular/code-snippet/badge/getting-started-cs1/src/app.component.css
@@ -0,0 +1,9 @@
+#element {
+    display: flex;
+    width: 400px;
+    margin: auto;
+    border: 1px solid #dddddd;
+    border-radius: 3px;
+    justify-content: center;
+  }
+
diff --git a/ej2-angular/code-snippet/badge/getting-started-cs1/src/app.component.ts b/ej2-angular/code-snippet/badge/getting-started-cs1/src/app.component.ts
@@ -12,7 +12,8 @@ imports: [
 
 
 standalone: true,
-    selector: 'my-app',
+    selector: 'app-root',
+    styleUrls: ['./app.component.css'],
     template: `<div id='element'><h1>Badge Component <span class="e-badge">New</span></h1></div>`
 })
 

diff --git a/ej2-angular/code-snippet/badge/getting-started-cs1/src/styles.css b/ej2-angular/code-snippet/badge/getting-started-cs1/src/styles.css
@@ -1,12 +1,3 @@
 @import '/node_modules/@syncfusion/ej2-base/styles/material.css';
 @import '/node_modules/@syncfusion/ej2-notifications/styles/material.css';
 @import '/node_modules/@syncfusion/ej2-angular-notifications/styles/material.css';
-
-#element {
-  display: flex;
-  width: 400px;
-  margin: auto;
-  border: 1px solid #dddddd;
-  border-radius: 3px;
-  justify-content: center;
-}
diff --git a/...getting-started-cs1/src/default-style.css → ...getting-started-cs1/src/app.component.css b/...getting-started-cs1/src/default-style.css → ...getting-started-cs1/src/app.component.css
diff --git a/ej2-angular/code-snippet/dashboard-layout/getting-started-cs1/src/app.component.ts b/ej2-angular/code-snippet/dashboard-layout/getting-started-cs1/src/app.component.ts
@@ -12,7 +12,7 @@ imports: [ DashboardLayoutModule],
 
 standalone: true,
     selector: 'app-root',
-    styleUrls: ['./default-style.css'],
+    styleUrls: ['./app.component.css'],
     template: `
     <div class="control-section">
         <ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]="5" [cellSpacing]='cellSpacing'>

diff --git a/...g-started-panel-cs1/src/default-style.css → ...g-started-panel-cs1/src/app.component.css b/...g-started-panel-cs1/src/default-style.css → ...g-started-panel-cs1/src/app.component.css
diff --git a/ej2-angular/code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.ts b/ej2-angular/code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.ts
@@ -12,7 +12,7 @@ imports: [ DashboardLayoutModule],
 
 standalone: true,
     selector: 'app-root',
-    styleUrls: ['./default-style.css'],
+    styleUrls: ['./app.component.css'],
     template: `
     <div class="control-section">
         <ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]='5' [cellSpacing]='cellSpacing' [panels]='panels'>

diff --git a/ej2-angular/code-snippet/listview/getting-started-cs1/src/app.component.css b/ej2-angular/code-snippet/listview/getting-started-cs1/src/app.component.css
@@ -0,0 +1,7 @@
+#sample-list {
+    display: block;
+    max-width: 400px;
+    margin: auto;
+    border: 1px solid #dddddd;
+    border-radius: 3px;
+  }
diff --git a/ej2-angular/code-snippet/sidebar/getting-started-cs1/package.json b/ej2-angular/code-snippet/sidebar/getting-started-cs1/package.json
@@ -14,7 +14,8 @@
     "@angular/platform-browser": "17.1.2",
     "@angular/platform-browser-dynamic": "17.1.2",
     "@syncfusion/ej2-angular-navigations": "*",
-    "@syncfusion/ej2-base": "*",
+    "@syncfusion/ej2-base": "*",    
+    "@syncfusion/ej2-navigations": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@syncfusion/ej2-angular-buttons": "*",
     "@angular/animations": "17.1.2",

diff --git a/ej2-angular/code-snippet/sidebar/showBackDrop-cs1/package.json b/ej2-angular/code-snippet/sidebar/showBackDrop-cs1/package.json
@@ -15,6 +15,7 @@
     "@angular/platform-browser-dynamic": "17.1.2",
     "@syncfusion/ej2-angular-navigations": "*",
     "@syncfusion/ej2-base": "*",
+    "@syncfusion/ej2-navigations": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@syncfusion/ej2-angular-buttons": "*",
     "@syncfusion/ej2-angular-lists": "*",

diff --git a/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/app.component.css b/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/app.component.css
@@ -0,0 +1,9 @@
+#treeparent {
+    display: block;
+    max-width: 400px;
+    max-height: 330px;
+    margin: auto;
+    overflow: auto;
+    border: 1px solid #dddddd;
+    border-radius: 3px;
+}
diff --git a/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/app.component.ts b/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/app.component.ts
@@ -14,7 +14,8 @@ imports: [
 
 
 standalone: true,
-    selector: 'app-container',
+    selector: 'app-root',
+    styleUrls: ['./app.component.css'],
     template: `<div id='treeparent'><ejs-treeview id='treeelement' [fields]='field'></ejs-treeview></div>`
 })
 export class AppComponent {

diff --git a/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/styles.css b/ej2-angular/code-snippet/tree-view/getting-started-cs8/src/styles.css
@@ -1,17 +1,8 @@
 
-@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
-@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';
-@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@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';
+@import '../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
 
-#treeparent {
-    display: block;
-    max-width: 400px;
-    max-height: 330px;
-    margin: auto;
-    overflow: auto;
-    border: 1px solid #dddddd;
-    border-radius: 3px;
-}
diff --git a/ej2-angular/dashboard-layout/getting-started.md b/ej2-angular/dashboard-layout/getting-started.md
@@ -103,8 +103,8 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w
 To render the DashboardLayout component, import the DashboardLayout and its dependent component's styles as given below in `[src/styles.css]`.
 
 ```css
-@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
-@import "../../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css";
 ```
 
 >Note: To refer the combined component styles, use Syncfusion [`CRG`](https://crg.syncfusion.com/) (Custom Resource Generator) in your application.
@@ -129,7 +129,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  styleUrls: ['default-style.css'],
+  styleUrls: ['./app.component.css'],
   template: `
   <div class="control-section">
         <ejs-dashboardlayout id='defaultLayout' [columns]="5" #defaultLayout [cellSpacing]='cellSpacing'>
@@ -189,7 +189,7 @@ export class AppComponent {
 }
 ```
 
-* Import DashboardLayout module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-layouts`.
+* Import DashboardLayout module into Angular application(`app.module.ts`) from the package `@syncfusion/ej2-angular-layouts`.
 
 ```javascript
 import { NgModule }      from '@angular/core';
@@ -222,8 +222,8 @@ The following example shows a basic DashboardLayout by adding the panels propert
 {% include code-snippet/dashboard-layout/getting-started-cs1/src/app.component.ts %}
 {% endhighlight %}
 
-{% highlight ts tabtitle="default-style.css" %}
-{% include code-snippet/dashboard-layout/getting-started-cs1/src/default-style.css %}
+{% highlight ts tabtitle="app.component.css" %}
+{% include code-snippet/dashboard-layout/getting-started-cs1/src/app.component.css %}
 {% endhighlight %}
 
 {% highlight ts tabtitle="main.ts" %}
@@ -246,7 +246,7 @@ import { Component,ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  styleUrls: ['app/default-style.css'],
+  styleUrls: ['./app.component.css'],
   template: `
   <div class="control-section">
     <ejs-dashboardlayout id='defaultLayout' #defaultLayout [cellSpacing]='cellSpacing' [panels]='panels' [columns]="5">
@@ -274,8 +274,8 @@ The following example shows a basic DashboardLayout by using the `panels` proper
 {% include code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.ts %}
 {% endhighlight %}
 
-{% highlight ts tabtitle="default-style.css" %}
-{% include code-snippet/dashboard-layout/getting-started-panel-cs1/src/default-style.css %}
+{% highlight ts tabtitle="app.component.css" %}
+{% include code-snippet/dashboard-layout/getting-started-panel-cs1/src/app.component.css %}
 {% endhighlight %}
 
 {% highlight ts tabtitle="main.ts" %}

diff --git a/ej2-angular/listview/getting-started.md b/ej2-angular/listview/getting-started.md
@@ -130,6 +130,10 @@ The output will appear as follows.
 {% include code-snippet/listview/getting-started-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="app.component.css" %}
+{% include code-snippet/listview/getting-started-cs1/src/app.component.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/listview/getting-started-cs1/src/main.ts %}
 {% endhighlight %}

diff --git a/ej2-angular/sidebar/getting-started.md b/ej2-angular/sidebar/getting-started.md
@@ -98,7 +98,7 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w
 
 ## Adding Styles
 
-To render the Sidebar component, need to import Sidebar and its dependent component's styles as given below in `app.component.css`.
+To render the Sidebar component, need to import Sidebar and its dependent component's styles as given below in `[src/styles.css]`.
 
 ```css
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@@ -150,6 +150,10 @@ The following samples shows the sidebar component in browser.
 {% include code-snippet/sidebar/getting-started-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="app.component.css" %}
+{% include code-snippet/sidebar/getting-started-cs1/src/app.component.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/sidebar/getting-started-cs1/src/main.ts %}
 {% endhighlight %}
@@ -171,6 +175,10 @@ N> To achieve a proper **backdrop**, we suggest that you create a wrapper parent
 {% include code-snippet/sidebar/showBackDrop-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="app.component.css" %}
+{% include code-snippet/sidebar/showBackDrop-cs1/src/app.component.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/sidebar/showBackDrop-cs1/src/main.ts %}
 {% endhighlight %}
@@ -189,6 +197,10 @@ Positioning the Sidebar to the right or left of the main content can be achieved
 {% include code-snippet/sidebar/position-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="app.component.css" %}
+{% include code-snippet/sidebar/position-cs1/src/app.component.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/sidebar/position-cs1/src/main.ts %}
 {% endhighlight %}
@@ -205,6 +217,10 @@ Animation transitions can be set while expanding or collapsing the Sidebar using
 {% include code-snippet/sidebar/animate-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="app.component.css" %}
+{% include code-snippet/sidebar/animate-cs1/src/app.component.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/sidebar/animate-cs1/src/main.ts %}
 {% endhighlight %}
@@ -221,6 +237,10 @@ Sidebar can be closed on document click by setting [`closeOnDocumentClick`](http
 {% include code-snippet/sidebar/document-click-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="app.component.css" %}
+{% include code-snippet/sidebar/document-click-cs1/src/app.component.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/sidebar/document-click-cs1/src/main.ts %}
 {% endhighlight %}
@@ -237,6 +257,10 @@ Expand or collapse the Sidebar while swiping in touch devices using [`enableGest
 {% include code-snippet/sidebar/gestures-cs1/src/app.component.ts %}
 {% endhighlight %}
 
+{% highlight ts tabtitle="app.component.css" %}
+{% include code-snippet/sidebar/gestures-cs1/src/app.component.css %}
+{% endhighlight %}
+
 {% highlight ts tabtitle="main.ts" %}
 {% include code-snippet/sidebar/gestures-cs1/src/main.ts %}
 {% endhighlight %}

diff --git a/ej2-angular/treeview/getting-started.md b/ej2-angular/treeview/getting-started.md
@@ -168,8 +168,8 @@ The output will appear as follows.
 {% include code-snippet/tree-view/getting-started-cs8/src/app.component.ts %}
 {% endhighlight %}
 
-{% highlight ts tabtitle="styles.css" %}
-{% include code-snippet/tree-view/getting-started-cs8/src/styles.css %}
+{% highlight ts tabtitle="app.component.css" %}
+{% include code-snippet/tree-view/getting-started-cs8/src/app.component.css %}
 {% endhighlight %}
 
 {% highlight ts tabtitle="main.ts" %}