Integrated latest changes at 12-05-2024 10:30:16 PM

Author: SyncfusionBuild

ej2-angular/code-snippet/diagram/layers/layers-cs4/src/app.component.ts

@@ -9,7 +9,7 @@ providers: [ ],
 standalone: true,
     selector: "app-container",
     template: `
-  
+    <button (click)="addLayer()">addLayer</button>
     <ejs-diagram #diagram id="diagram" width="100%" height="580px" [layers]="layers">
     <e-nodes>
             <e-node id='node1' [width]=100 [height]=100 [offsetX]=100 [offsetY]=100 >
@@ -25,8 +25,7 @@ standalone: true,
                 </e-node-annotations>
             </e-node>
     </e-nodes>
-    </ejs-diagram>
-    <button (click)="addLayer()">addLayer</button>`,
+    </ejs-diagram>`,
     encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {

ej2-angular/code-snippet/timeline/align/after/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-layouts": "*",
     "@syncfusion/ej2-angular-layouts": "*",
     "@angular/animations": "17.1.2",
     "@angular/common": "17.1.2",

ej2-angular/code-snippet/timeline/align/after/src/app.component.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
-
+import { CommonModule } from '@angular/common';
 
 import { Component } from '@angular/core';
 import { TimelineItemModel, TimelineModule, TimelineAllModule } from "@syncfusion/ej2-angular-layouts";
 
 @Component({
-imports: [ TimelineModule, TimelineAllModule ],
+imports: [ CommonModule, TimelineModule, TimelineAllModule ],
 
 
 standalone: true,

ej2-angular/code-snippet/timeline/align/alternate-reverse/package.json

@@ -14,6 +14,7 @@
     "@angular/platform-browser": "17.1.2",
     "@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",

ej2-angular/code-snippet/timeline/align/alternate-reverse/src/app.component.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
-
+import { CommonModule } from '@angular/common';
 
 import { Component } from '@angular/core';
 import { TimelineItemModel, TimelineModule, TimelineAllModule } from "@syncfusion/ej2-angular-layouts";
 
 @Component({
-imports: [ TimelineModule, TimelineAllModule ],
+imports: [ CommonModule, TimelineModule, TimelineAllModule ],
 
 
 standalone: true,

ej2-angular/code-snippet/timeline/align/alternate/package.json

@@ -14,6 +14,7 @@
     "@angular/platform-browser": "17.1.2",
     "@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",

ej2-angular/code-snippet/timeline/align/alternate/src/app.component.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
-
+import { CommonModule } from '@angular/common';
 
 import { Component } from '@angular/core';
 import { TimelineItemModel, TimelineModule, TimelineAllModule } from "@syncfusion/ej2-angular-layouts";
 
 @Component({
-imports: [ TimelineModule, TimelineAllModule ],
+imports: [ CommonModule, TimelineModule, TimelineAllModule ],
 
 
 standalone: true,

ej2-angular/code-snippet/timeline/align/before/src/app.component.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
-
+import { CommonModule } from '@angular/common';
 
 import { Component } from '@angular/core';
 import { TimelineItemModel, TimelineModule, TimelineAllModule } from "@syncfusion/ej2-angular-layouts";
 
 @Component({
-imports: [ TimelineModule, TimelineAllModule ],
+imports: [ CommonModule, TimelineModule, TimelineAllModule ],
 
 
 standalone: true,

ej2-angular/code-snippet/timeline/orientations/horizontal/package.json

@@ -14,6 +14,7 @@
     "@angular/platform-browser": "17.1.2",
     "@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",

ej2-angular/code-snippet/timeline/orientations/horizontal/src/app.component.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
-
+import { CommonModule } from '@angular/common';
 
 import { Component } from '@angular/core';
 import { TimelineItemModel, TimelineModule, TimelineAllModule } from "@syncfusion/ej2-angular-layouts";
 
 @Component({
-imports: [ TimelineModule, TimelineAllModule ],
+imports: [ CommonModule, TimelineModule, TimelineAllModule ],
 
 
 standalone: true,

ej2-angular/code-snippet/timeline/orientations/vertical/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-layouts": "*",
     "@syncfusion/ej2-angular-layouts": "*",
     "@angular/animations": "17.1.2",
     "@angular/common": "17.1.2",

ej2-angular/code-snippet/timeline/orientations/vertical/src/app.component.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
-
+import { CommonModule } from '@angular/common';
 
 import { Component } from '@angular/core';
 import { TimelineItemModel, TimelineModule, TimelineAllModule } from "@syncfusion/ej2-angular-layouts";
 
 @Component({
-imports: [ TimelineModule, TimelineAllModule ],
+imports: [ CommonModule, TimelineModule, TimelineAllModule ],
 
 
 standalone: true,

ej2-angular/code-snippet/timeline/reverse/package.json

@@ -14,6 +14,7 @@
     "@angular/platform-browser": "17.1.2",
     "@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",

ej2-angular/code-snippet/timeline/reverse/src/app.component.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
-
+import { CommonModule } from '@angular/common';
 
 import { Component } from '@angular/core';
 import { TimelineItemModel, TimelineModule, TimelineAllModule } from "@syncfusion/ej2-angular-layouts";
 
 @Component({
-imports: [ TimelineModule, TimelineAllModule ],
+imports: [ CommonModule, TimelineModule, TimelineAllModule ],
 
 
 standalone: true,

ej2-angular/diagram/connector-customization.md

@@ -286,7 +286,7 @@ The [`resetSegments`](https://ej2.syncfusion.com/angular/documentation/api/diagr
 
 ## Enable Connector Splitting
 
-The connectors are used to create a link between two points, ports, or nodes to represent the relationship between them. Split the connector between two nodes when dropping a new node onto an existing connector and create a connection between the new node and existing nodes by setting the [`enableConnectorSplit`](https://ej2.syncfusion.com/angular/documentation/api/diagram/enableConnectorSplit/) as true. The default value of the [`enableConnectorSplit`](https://ej2.syncfusion.com/angular/documentation/api/diagram/enableConnectorSplit/) is false
+The connectors are used to create a link between two points, ports, or nodes to represent the relationship between them. Split the connector between two nodes when dropping a new node onto an existing connector and create a connection between the new node and existing nodes by setting the [`enableConnectorSplit`](https://ej2.syncfusion.com/angular/documentation/api/diagram/enableconnectorsplit/) as true. The default value of the [`enableConnectorSplit`](https://ej2.syncfusion.com/angular/documentation/api/diagram/enableconnectorsplit/) is false
 
 The following code illustrates how to split the connector and create a connection with new node.
 
@@ -306,7 +306,7 @@ The following code illustrates how to split the connector and create a connectio
 
 ### Preserve connector style while connector splitting
 
-When splitting a connector using [`enableConnectorSplit`](https://ej2.syncfusion.com/angular/documentation/api/diagram/enableConnectorSplit/), the new connector created will be a normal connector without any specific styles. To ensure the new connector has the same style as the original connector, you can use the collectionChange event to apply the styles.
+When splitting a connector using [`enableConnectorSplit`](https://ej2.syncfusion.com/angular/documentation/api/diagram/enableconnectorsplit/), the new connector created will be a normal connector without any specific styles. To ensure the new connector has the same style as the original connector, you can use the collectionChange event to apply the styles.
 
 The following example demonstrates how to apply the same style of the original connector to the newly added connector:
 

ej2-angular/diagram/context-menu.md

@@ -12,13 +12,12 @@ domainurl: ##DomainURL##
 
 <!-- markdownlint-disable MD010 -->
 
-In a graphical user interface (GUI), a context menu is a type of menu that appears when you perform a right-click operation. It offers users a set of actions relevant to the current context. In diagrams, context menus can be customized extensively. The Diagram control provides built-in context menu items while also allowing users to define custom menu items through the[`contextMenuSettings`](https://ej2.syncfusion.com/angular/documentation/api/diagram#contextMenuSettings) property. This flexibility enables tailoring menus to specific application needs, including creating nested levels of menu items for more intricate user interactions.
+In a graphical user interface (GUI), a context menu is a type of menu that appears when you perform a right-click operation. It offers users a set of actions relevant to the current context. In diagrams, context menus can be customized extensively. The Diagram control provides built-in context menu items while also allowing users to define custom menu items through the[`contextMenuSettings`](https://ej2.syncfusion.com/angular/documentation/api/diagram/#contextmenusettings) property. This flexibility enables tailoring menus to specific application needs, including creating nested levels of menu items for more intricate user interactions.
 
-N> If you want to use contextMenu in diagram, you need to inject `DiagramContextMenu` Module in the diagram.
 
 ## Default context menu
 
-Diagram provides some default context menu items to ease the execution of some frequently used commands. The [`show`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuSettings#show-boolean) property helps you to enable/disable the context menu.
+Diagram provides some default context menu items to ease the execution of some frequently used commands. The [`show`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuSettings#show) property helps you to enable/disable the context menu.
 
 The following code illustrates how to enable the default context menu items.
 
@@ -38,7 +37,7 @@ The following code illustrates how to enable the default context menu items.
 
 Context menus can be customized for individual nodes by defining specific menu items beyond the default options. To add additional context menu items, you need to define and incorporate them into the [`items`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuSettingsModel#items) property of the context menu.
 
-Each custom item can be defined with specific text and ID using the [`text`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#text-string) and [`ID`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#id-string)  properties, respectively. Additionally, you can enhance visual cues by associating icons through the [`iconCss`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#iconCss-string) for enabling the use of font icons. The [`target`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#target-string) property specifies where each menu item should appear, and separators can be included using the [`separator`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#separator-boolean) property to visually group menu items. This flexibility allows for a tailored user interface that meets specific application needs efficiently. Nested menu items are defined within the [`items`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel/#items) property of a parent menu item.
+Each custom item can be defined with specific text and ID using the [`text`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#text) and [`ID`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#id)  properties, respectively. Additionally, you can enhance visual cues by associating icons through the [`iconCss`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#iconCss) for enabling the use of font icons. The [`target`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#target) property specifies where each menu item should appear, and separators can be included using the [`separator`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel#separator) property to visually group menu items. This flexibility allows for a tailored user interface that meets specific application needs efficiently. Nested menu items are defined within the [`items`](https://ej2.syncfusion.com/angular/documentation/api/diagram/contextMenuItemModel/#items) property of a parent menu item.
 
 ### To Display custom menu alone
 
@@ -140,4 +139,4 @@ The following example shows how to get these events.
 
 ## See Also
 
-* [How to open context menu on left click](https://support.syncfusion.com/kb/article/15100/how-to-perform-clipboard-operation-with-custom-context-menu-on-left-click-using-javascript-diagram)
+* [How to open context menu on left click](https://support.syncfusion.com/kb/article/15097/how-to-perform-clipboard-operation-with-custom-context-menu-on-left-click-using-angular-diagram)