@@ -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: `
@@ -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
index 67c4d98906..0be1bd9b7b 100644
--- 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
index 475de59669..edd8476032 100644
--- 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
index b93f8f4a2e..b1aa81e458 100644
--- 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" %}