syncfusion-content · SyncfusionBuild · Dec 9, 2024
diff --git a/ej2-angular-toc.html b/ej2-angular-toc.html
@@ -917,7 +917,7 @@
          </ul>
       </li>
        <li><a href="/ej2-angular/diagram/overview">Overview Control</a></li>
-       <li><a href="/ej2-angular/diagram/ej1-api-migration">Migration from Essential JS 1</a></li>
+       <li><a href="/ej2-angular/diagram/ej1-api-migration">Migration from Essential® JS 1</a></li>
        <li><a href="https://ej2.syncfusion.com/angular/documentation/api/diagram/">API Reference</a></li>
     </ul>
  </li>

diff --git a/ej2-angular/code-snippet/chips/default-cs1/index.html b/ej2-angular/code-snippet/chips/default-cs1/index.html
@@ -10,8 +10,8 @@
     <link href="styles.css" rel="stylesheet" />
 </head>
 <body>
-    <my-app>
+    <app-root>
         <div id='loader'>LOADING....</div>
-    </my-app>
+    </app-root> 
 </body>
 </html>
diff --git a/ej2-angular/code-snippet/chips/default-cs1/package.json b/ej2-angular/code-snippet/chips/default-cs1/package.json
@@ -13,7 +13,8 @@
     "@angular/core": "17.1.2",
     "@angular/platform-browser": "17.1.2",
     "@angular/platform-browser-dynamic": "17.1.2",
-    "@syncfusion/ej2-base": "*",
+    "@syncfusion/ej2-base": "*",    
+    "@syncfusion/ej2-buttons": "*",
     "@syncfusion/ej2-angular-buttons": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@angular/animations": "17.1.2",

diff --git a/ej2-angular/code-snippet/chips/default-cs1/src/app.component.ts b/ej2-angular/code-snippet/chips/default-cs1/src/app.component.ts
@@ -15,7 +15,7 @@ imports: [
 
 
 standalone: true,
-    selector: 'my-app',
+    selector: 'app-root',
     template: `<ejs-chiplist text="Janet Leverling"></ejs-chiplist>`
 })
 export class AppComponent {

diff --git a/ej2-angular/code-snippet/chips/default-cs1/src/styles.css b/ej2-angular/code-snippet/chips/default-cs1/src/styles.css
@@ -1,3 +1,15 @@
 
 @import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
-@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+
+#loader {
+    color: #008cff;
+    height: 40px;
+    width: 30%;
+    position: absolute;
+    font-family:  'Helvetica Neue','calibiri';
+    font-size:16px;
+    top: 45%;
+    left: 45%;
+  }
+
diff --git a/ej2-angular/code-snippet/dropdowntree/getting-started-cs1/index.html b/ej2-angular/code-snippet/dropdowntree/getting-started-cs1/index.html
@@ -1,19 +1,19 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>Angular DropDownTree</title>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Typescript Toolbar Controls" />
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Angular DropDownTree</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Angular DropDownTree Controls" />
 
-<meta name="author" content="Syncfusion" />
-    <link href="index.css" rel="stylesheet" />
-</head>
-<body>
-    <div id="wrapper" style='margin-top: 20px'>
-        <app-container>
-            <div id='loader'>LOADING....</div>
-        </app-container>
-    </div>
-</body>
-</html>
+<meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+</head>
+<body>
+    <div id="wrapper" style='margin-top: 20px'>
+        <app-root>
+            <div id='loader'>LOADING....</div>
+        </app-root>
+    </div>
+</body>
+</html>
diff --git a/ej2-angular/code-snippet/dropdowntree/getting-started-cs1/src/app.component.ts b/ej2-angular/code-snippet/dropdowntree/getting-started-cs1/src/app.component.ts
@@ -15,7 +15,7 @@ imports: [
 
 
 standalone: true,
-    selector: 'app-container',
+    selector: 'app-root',
     // specifies the template string for the DropDownTree component
     template: `<ejs-dropdowntree id='dropdowntree' [fields]='fields' placeholder='Select a Item'></ejs-dropdowntree>`
 })

diff --git a/ej2-angular/code-snippet/tooltip/getting-started-cs7/index.html b/ej2-angular/code-snippet/tooltip/getting-started-cs7/index.html
@@ -10,8 +10,8 @@
     <link href="index.css" rel="stylesheet" />
 </head>
 <body>
-    <my-app>
+    <app-root>
         <div id='loader'>LOADING....</div>
-    </my-app>
+    </app-root>
 </body>
-</html>
+</html>
diff --git a/ej2-angular/code-snippet/tooltip/getting-started-cs7/src/app.component.ts b/ej2-angular/code-snippet/tooltip/getting-started-cs7/src/app.component.ts
@@ -16,7 +16,7 @@ imports: [
 
 
 standalone: true,
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <div id='container' style="display: inline-block; position: relative; left: 50%;top: 100px;transform: translateX(-50%);">
         <ejs-tooltip id='tooltip' content='Tooltip content' target="#target">

diff --git a/ej2-angular/code-snippet/tooltip/getting-started-cs8/index.html b/ej2-angular/code-snippet/tooltip/getting-started-cs8/index.html
@@ -10,8 +10,8 @@
     <link href="index.css" rel="stylesheet" />
 </head>
 <body>
-    <my-app>
+    <app-root>
         <div id='loader'>LOADING....</div>
-    </my-app>
+    </app-root>
 </body>
-</html>
+</html>
diff --git a/ej2-angular/code-snippet/tooltip/getting-started-cs8/src/app.component.ts b/ej2-angular/code-snippet/tooltip/getting-started-cs8/src/app.component.ts
@@ -16,7 +16,7 @@ imports: [
 
 
 standalone: true,
-    selector: 'my-app',
+    selector: 'app-root',
     template: `
         <div id="tool">
           <ejs-tooltip target='.e-info' position='RightCenter'>

diff --git a/ej2-angular/diagram/accessibility.md b/ej2-angular/diagram/accessibility.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Accessibility in Angular Diagram component | Syncfusion
-description: Learn here all about Accessibility in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Accessibility in Angular Diagram component | Syncfusion®
+description: Learn here all about Accessibility in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Accessibility 
 documentation: ug
@@ -104,15 +104,15 @@ Attribute provides the text label with some default description for below elemen
 
 ### Mobile device support
 
-Syncfusion Diagram component are more user-friendly and accessible to individuals using mobile devices, including those with disabilities. These are designed to be responsive, adaptable to various screen sizes and orientations, and touch-friendly.
+Syncfusion® Diagram component are more user-friendly and accessible to individuals using mobile devices, including those with disabilities. These are designed to be responsive, adaptable to various screen sizes and orientations, and touch-friendly.
 
 ### Screen Reader Support
 
 The Diagram component supports and its information was dictated properly by the screen readers based on the ARIA attributes and content.
 
 ### Keyboard navigation support
 
-Syncfusion Diagram component support keyboard navigation, allowing users who rely on alternate methods to effortlessly navigate and interact with the component.
+Syncfusion® Diagram component support keyboard navigation, allowing users who rely on alternate methods to effortlessly navigate and interact with the component.
 
 ## Keyboard interaction
 
@@ -144,4 +144,4 @@ The accessibility compliance of the Diagram component is shown in the following
 
 ## See also
 
-- [Accessibility in Syncfusion Angular components](../common/accessibility)
+- [Accessibility in Syncfusion® Angular components](../common/accessibility)
diff --git a/ej2-angular/diagram/automatic-layout.md b/ej2-angular/diagram/automatic-layout.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Automatic layout in Angular Diagram component | Syncfusion
-description: Learn here all about Automatic layout in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Automatic layout in Angular Diagram component | Syncfusion®
+description: Learn here all about Automatic layout in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Automatic layout 
 documentation: ug

diff --git a/ej2-angular/diagram/bezier-controlPoint.md b/ej2-angular/diagram/bezier-controlPoint.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Bezier control points interaction in Angular Diagram component | Syncfusion
-description: Learn here all about Connectors in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Bezier control points interaction in Angular Diagram component | Syncfusion®
+description: Learn here all about Connectors in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Bezier control points interaction 
 documentation: ug

diff --git a/ej2-angular/diagram/bezier-segEditOrientation.md b/ej2-angular/diagram/bezier-segEditOrientation.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Bezier Segment edit orientation in Angular Diagram component | Syncfusion
-description: Learn here all about Connectors in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Bezier Segment edit orientation in Angular Diagram component | Syncfusion®
+description: Learn here all about Connectors in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Bezier Segment edit orientation 
 documentation: ug

diff --git a/ej2-angular/diagram/bpmn-activities.md b/ej2-angular/diagram/bpmn-activities.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Bpmn activity in Angular Diagram component | Syncfusion
-description: Learn here all about Bpmn shapes in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Bpmn activity in Angular Diagram component | Syncfusion®
+description: Learn here all about Bpmn shapes in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Bpmn activity 
 documentation: ug

diff --git a/ej2-angular/diagram/bpmn-dataObject.md b/ej2-angular/diagram/bpmn-dataObject.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Bpmn DataObject in Angular Diagram component | Syncfusion
-description: Learn here all about Bpmn shapes in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Bpmn DataObject in Angular Diagram component | Syncfusion®
+description: Learn here all about Bpmn shapes in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Bpmn DataObject 
 documentation: ug

diff --git a/ej2-angular/diagram/bpmn-dataSource.md b/ej2-angular/diagram/bpmn-dataSource.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Bpmn Datasource in Angular Diagram component | Syncfusion
-description: Learn here all about Bpmn shapes in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Bpmn Datasource in Angular Diagram component | Syncfusion®
+description: Learn here all about Bpmn shapes in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Bpmn Datasource 
 documentation: ug

diff --git a/ej2-angular/diagram/bpmn-events.md b/ej2-angular/diagram/bpmn-events.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Bpmn Events in Angular Diagram component | Syncfusion
-description: Learn here all about Bpmn shapes in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Bpmn Events in Angular Diagram component | Syncfusion®
+description: Learn here all about Bpmn shapes in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Bpmn Events 
 documentation: ug

diff --git a/ej2-angular/diagram/bpmn-expandedSubProcess.md b/ej2-angular/diagram/bpmn-expandedSubProcess.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Bpmn Expanded subProcess in Angular Diagram component | Syncfusion
-description: Learn here all about Bpmn shapes in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Bpmn Expanded subProcess in Angular Diagram component | Syncfusion®
+description: Learn here all about Bpmn shapes in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Bpmn Expanded subProcess 
 documentation: ug

diff --git a/ej2-angular/diagram/bpmn-flows.md b/ej2-angular/diagram/bpmn-flows.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Bpmn Flows in Angular Diagram component | Syncfusion
-description: Learn here all about Bpmn shapes in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Bpmn Flows in Angular Diagram component | Syncfusion®
+description: Learn here all about Bpmn shapes in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Bpmn Flows 
 documentation: ug

diff --git a/ej2-angular/diagram/bpmn-gateway.md b/ej2-angular/diagram/bpmn-gateway.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Bpmn Gateway in Angular Diagram component | Syncfusion
-description: Learn here all about Bpmn shapes in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Bpmn Gateway in Angular Diagram component | Syncfusion®
+description: Learn here all about Bpmn shapes in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Bpmn Gateway 
 documentation: ug

diff --git a/ej2-angular/diagram/bpmn-group.md b/ej2-angular/diagram/bpmn-group.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Bpmn Events in Angular Diagram component | Syncfusion
-description: Learn here all about Bpmn shapes in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Bpmn Events in Angular Diagram component | Syncfusion®
+description: Learn here all about Bpmn shapes in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Bpmn Events 
 documentation: ug

diff --git a/ej2-angular/diagram/bpmn-shapes.md b/ej2-angular/diagram/bpmn-shapes.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Bpmn shapes in Angular Diagram component | Syncfusion
-description: Learn here all about Bpmn shapes in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Bpmn shapes in Angular Diagram component | Syncfusion®
+description: Learn here all about Bpmn shapes in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Bpmn shapes 
 documentation: ug

diff --git a/ej2-angular/diagram/bpmn-textAnnotation.md b/ej2-angular/diagram/bpmn-textAnnotation.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Bpmn Text annotation in Angular Diagram component | Syncfusion
-description: Learn here all about Bpmn shapes in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Bpmn Text annotation in Angular Diagram component | Syncfusion®
+description: Learn here all about Bpmn shapes in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Bpmn Text annotation 
 documentation: ug

diff --git a/ej2-angular/diagram/commands.md b/ej2-angular/diagram/commands.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Commands in Angular Diagram component | Syncfusion
-description: Learn here all about Commands in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Commands in Angular Diagram component | Syncfusion®
+description: Learn here all about Commands in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Commands 
 documentation: ug

diff --git a/ej2-angular/diagram/complex-layout.md b/ej2-angular/diagram/complex-layout.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Complex hierarchical tree layout in Angular Diagram component | Syncfusion
-description: Learn here all about Automatic layout in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Complex hierarchical tree layout in Angular Diagram component | Syncfusion®
+description: Learn here all about Automatic layout in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Complex hierarchical tree layout
 documentation: ug

diff --git a/ej2-angular/diagram/connector-bezier.md b/ej2-angular/diagram/connector-bezier.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Bezier connectors in Angular Diagram component | Syncfusion
-description: Learn here all about Connectors in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Bezier connectors in Angular Diagram component | Syncfusion®
+description: Learn here all about Connectors in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Connectors 
 documentation: ug

diff --git a/ej2-angular/diagram/connector-customization.md b/ej2-angular/diagram/connector-customization.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Connector customization in Angular Diagram component | Syncfusion
-description: Learn here all about Connectors in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Connector customization in Angular Diagram component | Syncfusion®
+description: Learn here all about Connectors in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Connector customization
 documentation: ug

diff --git a/ej2-angular/diagram/connector-events.md b/ej2-angular/diagram/connector-events.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Connectors in Angular Diagram component | Syncfusion
-description: Learn here all about Connectors in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Connectors in Angular Diagram component | Syncfusion®
+description: Learn here all about Connectors in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Connectors 
 documentation: ug

diff --git a/ej2-angular/diagram/connector-interaction.md b/ej2-angular/diagram/connector-interaction.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Connector Interaction in Angular Diagram component | Syncfusion
-description: Learn here all about Connectors in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Connector Interaction in Angular Diagram component | Syncfusion®
+description: Learn here all about Connectors in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Connector Interaction 
 documentation: ug

diff --git a/ej2-angular/diagram/connector-labels.md b/ej2-angular/diagram/connector-labels.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Connector Labels in Angular Diagram component | Syncfusion
-description: Learn here all about Labels in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Connector Labels in Angular Diagram component | Syncfusion®
+description: Learn here all about Labels in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Connector Labels
 documentation: ug

diff --git a/ej2-angular/diagram/connector-orthogonal.md b/ej2-angular/diagram/connector-orthogonal.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Orthogonal connectors in Angular Diagram component | Syncfusion
-description: Learn here all about Connectors in Syncfusion Angular Diagram component of Syncfusion Essential JS 2 and more.
+title: Orthogonal connectors in Angular Diagram component | Syncfusion®
+description: Learn here all about Connectors in Syncfusion® Angular Diagram component of Syncfusion Essential® JS 2 and more.
 platform: ej2-angular
 control: Orthogonal 
 documentation: ug