diff --git a/ej2-angular/code-snippet/diagram/layers/layers-cs4/src/app.component.ts b/ej2-angular/code-snippet/diagram/layers/layers-cs4/src/app.component.ts
index b273d29526..a11b5fb6eb 100644
--- a/ej2-angular/code-snippet/diagram/layers/layers-cs4/src/app.component.ts
+++ b/ej2-angular/code-snippet/diagram/layers/layers-cs4/src/app.component.ts
@@ -9,7 +9,7 @@ providers: [ ],
standalone: true,
selector: "app-container",
template: `
-
+
@@ -25,8 +25,7 @@ standalone: true,
-
- `,
+ `,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
diff --git a/ej2-angular/code-snippet/timeline/align/after/package.json b/ej2-angular/code-snippet/timeline/align/after/package.json
index d42b2951ce..f9dc7e47d0 100644
--- a/ej2-angular/code-snippet/timeline/align/after/package.json
+++ b/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",
diff --git a/ej2-angular/code-snippet/timeline/align/after/src/app.component.ts b/ej2-angular/code-snippet/timeline/align/after/src/app.component.ts
index 3fb1c0d955..88a6b7a0aa 100644
--- a/ej2-angular/code-snippet/timeline/align/after/src/app.component.ts
+++ b/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,
diff --git a/ej2-angular/code-snippet/timeline/align/alternate-reverse/package.json b/ej2-angular/code-snippet/timeline/align/alternate-reverse/package.json
index d42b2951ce..85ba9b22cd 100644
--- a/ej2-angular/code-snippet/timeline/align/alternate-reverse/package.json
+++ b/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",
diff --git a/ej2-angular/code-snippet/timeline/align/alternate-reverse/src/app.component.ts b/ej2-angular/code-snippet/timeline/align/alternate-reverse/src/app.component.ts
index 3fb1c0d955..88a6b7a0aa 100644
--- a/ej2-angular/code-snippet/timeline/align/alternate-reverse/src/app.component.ts
+++ b/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,
diff --git a/ej2-angular/code-snippet/timeline/align/alternate/package.json b/ej2-angular/code-snippet/timeline/align/alternate/package.json
index d42b2951ce..85ba9b22cd 100644
--- a/ej2-angular/code-snippet/timeline/align/alternate/package.json
+++ b/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",
diff --git a/ej2-angular/code-snippet/timeline/align/alternate/src/app.component.ts b/ej2-angular/code-snippet/timeline/align/alternate/src/app.component.ts
index 3fb1c0d955..88a6b7a0aa 100644
--- a/ej2-angular/code-snippet/timeline/align/alternate/src/app.component.ts
+++ b/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,
diff --git a/ej2-angular/code-snippet/timeline/align/before/src/app.component.ts b/ej2-angular/code-snippet/timeline/align/before/src/app.component.ts
index 3fb1c0d955..88a6b7a0aa 100644
--- a/ej2-angular/code-snippet/timeline/align/before/src/app.component.ts
+++ b/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,
diff --git a/ej2-angular/code-snippet/timeline/orientations/horizontal/package.json b/ej2-angular/code-snippet/timeline/orientations/horizontal/package.json
index d42b2951ce..85ba9b22cd 100644
--- a/ej2-angular/code-snippet/timeline/orientations/horizontal/package.json
+++ b/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",
diff --git a/ej2-angular/code-snippet/timeline/orientations/horizontal/src/app.component.ts b/ej2-angular/code-snippet/timeline/orientations/horizontal/src/app.component.ts
index 25555c8b14..817a0411be 100644
--- a/ej2-angular/code-snippet/timeline/orientations/horizontal/src/app.component.ts
+++ b/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,
diff --git a/ej2-angular/code-snippet/timeline/orientations/vertical/package.json b/ej2-angular/code-snippet/timeline/orientations/vertical/package.json
index d42b2951ce..f9dc7e47d0 100644
--- a/ej2-angular/code-snippet/timeline/orientations/vertical/package.json
+++ b/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",
diff --git a/ej2-angular/code-snippet/timeline/orientations/vertical/src/app.component.ts b/ej2-angular/code-snippet/timeline/orientations/vertical/src/app.component.ts
index 25555c8b14..817a0411be 100644
--- a/ej2-angular/code-snippet/timeline/orientations/vertical/src/app.component.ts
+++ b/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,
diff --git a/ej2-angular/code-snippet/timeline/reverse/package.json b/ej2-angular/code-snippet/timeline/reverse/package.json
index d42b2951ce..85ba9b22cd 100644
--- a/ej2-angular/code-snippet/timeline/reverse/package.json
+++ b/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",
diff --git a/ej2-angular/code-snippet/timeline/reverse/src/app.component.ts b/ej2-angular/code-snippet/timeline/reverse/src/app.component.ts
index faf6d65ff2..b58994c937 100644
--- a/ej2-angular/code-snippet/timeline/reverse/src/app.component.ts
+++ b/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,
diff --git a/ej2-angular/diagram/connector-customization.md b/ej2-angular/diagram/connector-customization.md
index 7607ac3242..b8e7c3abac 100644
--- a/ej2-angular/diagram/connector-customization.md
+++ b/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:
diff --git a/ej2-angular/diagram/context-menu.md b/ej2-angular/diagram/context-menu.md
index a13dfe1fbd..28b538f2dc 100644
--- a/ej2-angular/diagram/context-menu.md
+++ b/ej2-angular/diagram/context-menu.md
@@ -12,13 +12,12 @@ domainurl: ##DomainURL##
-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)
\ No newline at end of file
+* [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)
diff --git a/ej2-angular/diagram/layers.md b/ej2-angular/diagram/layers.md
index bc239339db..91b431032a 100644
--- a/ej2-angular/diagram/layers.md
+++ b/ej2-angular/diagram/layers.md
@@ -12,7 +12,7 @@ domainurl: ##DomainURL##
**Layer** organizes related shapes within a diagram control as named categories. Assigning shapes to different layers enables selective viewing, removal, and locking of distinct shape categories.
-In a diagram, [Layers](https://ej2.syncfusion.com/angular/documentation/api/diagram) facilitate the modification of properties for all shapes assigned to a specific layer. Key properties that can be configured include:
+In a diagram, [Layers](https://ej2.syncfusion.com/angular/documentation/api/diagram/layerModel/) facilitate the modification of properties for all shapes assigned to a specific layer. Key properties that can be configured include:
* Objects
* Visible
@@ -21,7 +21,7 @@ In a diagram, [Layers](https://ej2.syncfusion.com/angular/documentation/api/diag
## Objects
-The layer's [objects](https://ej2.syncfusion.com/angular/documentation/api/diagram/layer#objects-string[]) property specifies which diagram elements belong to that layer. This property contains a collection where you can define the categories of nodes and connectors that the layer encompasses.
+The layer's [objects](https://ej2.syncfusion.com/angular/documentation/api/diagram/layer/#objects) property specifies which diagram elements belong to that layer. This property contains a collection where you can define the categories of nodes and connectors that the layer encompasses.
In the following example, the basic shapes are categorized in layer 1, and the flow shapes are categorized in layer 2.
@@ -39,7 +39,7 @@ In the following example, the basic shapes are categorized in layer 1, and the f
## Visible
-The layer's [visible](https://ej2.syncfusion.com/angular/documentation/api/diagram/layer#visible-boolean) property is used to control the visibility of the elements assigned to the layer. You can hide objects in one layer while showing objects in another layer.
+The layer's [visible](https://ej2.syncfusion.com/angular/documentation/api/diagram/layer#visible) property is used to control the visibility of the elements assigned to the layer. You can hide objects in one layer while showing objects in another layer.
In the following example, the visibility of layer one is set to false. By default, the `visible` property of a layer is set to **true**.
@@ -58,7 +58,7 @@ In the following example, the visibility of layer one is set to false. By defaul
## Lock
-The layer's [lock](https://ej2.syncfusion.com/angular/documentation/api/diagram/layer#lock-boolean) property is used to prevent or allow changes to the element's dimensions and positions. Locking a layer prevents any interactions with the objects in that layer, such as selecting, dragging, rotating, and connecting.
+The layer's [lock](https://ej2.syncfusion.com/angular/documentation/api/diagram/layer/#lock) property is used to prevent or allow changes to the element's dimensions and positions. Locking a layer prevents any interactions with the objects in that layer, such as selecting, dragging, rotating, and connecting.
In the following example the objects in layer one is locked. By default, the `lock` property of a layer is set to **false**.
@@ -76,7 +76,7 @@ In the following example the objects in layer one is locked. By default, the `lo
## AddInfo
-The [`addInfo`](https://ej2.syncfusion.com/angular/documentation/api/diagram/layer#addinfo-Object) property of layers allow you to maintain additional information to the layers.
+The [`addInfo`](https://ej2.syncfusion.com/angular/documentation/api/diagram/layer/#addinfo) property of layers allow you to maintain additional information to the layers.
The following code illustrates how to add additional information to the layers.
@@ -128,9 +128,9 @@ export class AppComponent {
## Add layer at runtime
-Layers can be added at runtime by using the [`addLayer`](https://ej2.syncfusion.com/angular/documentation/api/diagram#addLayer) public method.
+Layers can be added at runtime by using the [`addLayer`](https://ej2.syncfusion.com/angular/documentation/api/diagram/#addlayer) public method.
-The layer's [`ID`](https://ej2.syncfusion.com/angular/documentation/api/diagram/layer#id-string) property defines the ID of the layer, which is used to find the layer at runtime and apply any customizations. You can also add new objects to the new layer using the `addLayer` method.
+The layer's [`ID`](https://ej2.syncfusion.com/angular/documentation/api/diagram/layer/#id) property defines the ID of the layer, which is used to find the layer at runtime and apply any customizations. You can also add new objects to the new layer using the `addLayer` method.
The following code illustrates how to add a layer.
@@ -148,7 +148,7 @@ The following code illustrates how to add a layer.
## Remove layer at runtime
-Layers can be removed at runtime by using the [`removeLayer`](https://ej2.syncfusion.com/angular/documentation/api/diagram#removeLayer) public method.
+Layers can be removed at runtime by using the [`removeLayer`](https://ej2.syncfusion.com/angular/documentation/api/diagram/#removelayer) public method.
To remove a layer, pass the ID of the layer you want to remove as a parameter to the `removeLayer` method.
@@ -168,7 +168,7 @@ The following code illustrates how to remove a layer.
## moveObjects
-You can move objects from one layer to another dynamically using the [`moveObjects`](https://ej2.syncfusion.com/angular/documentation/api/diagram#moveObjects) public method of the diagram control. This can be useful for managing complex diagrams with multiple layers where you need to update the categorization of elements based on user interaction or other dynamic conditions.
+You can move objects from one layer to another dynamically using the [`moveObjects`](https://ej2.syncfusion.com/angular/documentation/api/diagram/#moveobjects) public method of the diagram control. This can be useful for managing complex diagrams with multiple layers where you need to update the categorization of elements based on user interaction or other dynamic conditions.
The following code illustrates how to move objects from one layer to another layer from the diagram.
@@ -190,7 +190,7 @@ The following code illustrates how to move objects from one layer to another lay
### Bring Layer Forward
-Layers can be moved forward at runtime by using the [`bringLayerForward`](https://ej2.syncfusion.com/angular/documentation/api/diagram#bringLayerForward) public method.
+Layers can be moved forward at runtime by using the [`bringLayerForward`](https://ej2.syncfusion.com/angular/documentation/api/diagram/#bringlayerforward) public method.
```typescript
@@ -201,7 +201,7 @@ this.diagram.bringLayerForward('layer1');
### Send Layer Backward
-Layers can be moved backward at runtime by using the [`sendLayerBackward`](https://ej2.syncfusion.com/angular/documentation/api/diagram#sendLayerBackward) public method.
+Layers can be moved backward at runtime by using the [`sendLayerBackward`](https://ej2.syncfusion.com/angular/documentation/api/diagram/#sendlayerbackward) public method.
```typescript
@@ -225,13 +225,13 @@ The following code illustrates how to send the layer forward/backward to another
### Layer and objects rendering order
-The rendering of diagram elements with layer properties involves grouping them within a `diagram_diagramLayer` for basic shape nodes and `diagram_nativeLayer_svg` for SVG-native elements. Even if different types of nodes are added within the same layer, the rendering at the DOM level occurs in separate layers. Therefore, when executing layering commands like [`bringLayerForward`](https://ej2.syncfusion.com/angular/documentation/api/diagram#bringLayerForward) and [`sendLayerBackward`](https://ej2.syncfusion.com/angular/documentation/api/diagram#sendLayerBackward), the native SVG elements will always render above the basic shape elements.
+The rendering of diagram elements with layer properties involves grouping them within a `diagram_diagramLayer` for basic shape nodes and `diagram_nativeLayer_svg` for SVG-native elements. Even if different types of nodes are added within the same layer, the rendering at the DOM level occurs in separate layers. Therefore, when executing layering commands like [`bringLayerForward`](https://ej2.syncfusion.com/angular/documentation/api/diagram/#bringlayerforward) and [`sendLayerBackward`](https://ej2.syncfusion.com/angular/documentation/api/diagram/#sendlayerbackward), the native SVG elements will always render above the basic shape elements.
The order of rendering is as follows: HTML shapes -> SVG shapes -> Path data shapes & Basic shapes.
## Clone Layer
-Layers can be cloned with its object by using the [`cloneLayer`](https://ej2.syncfusion.com/angular/documentation/api/diagram#cloneLayer) public method.
+Layers can be cloned with its object by using the [`cloneLayer`](https://ej2.syncfusion.com/angular/documentation/api/diagram/#clonelayer) public method.
The following code illustrates how to clone the layer.
@@ -255,7 +255,7 @@ Public methods are available to get and set the active layer, which are explaine
### Get ActiveLayer
-Active layer of the diagram can be retrieved by using the [`getActiveLayer`](https://ej2.syncfusion.com/angular/documentation/api/diagram#getActiveLayer) public method.
+Active layer of the diagram can be retrieved by using the [`getActiveLayer`](https://ej2.syncfusion.com/angular/documentation/api/diagram/#getactivelayer) public method.
The following code illustrates how to fetch active layer from the diagram.
@@ -267,7 +267,7 @@ this.diagram.getActiveLayer();
### Set ActiveLayer
-You can set any layer to be the active layer of the diagram by using the [`setActiveLayer`](https://ej2.syncfusion.com/angular/documentation/api/diagram#setActiveLayer) public method.
+You can set any layer to be the active layer of the diagram by using the [`setActiveLayer`](https://ej2.syncfusion.com/angular/documentation/api/diagram/#setactivelayer) public method.
The following code illustrates how to set active layer for diagram.
diff --git a/ej2-angular/diagram/ports-appearance.md b/ej2-angular/diagram/ports-appearance.md
index 448794a3a9..fbeb2bf070 100644
--- a/ej2-angular/diagram/ports-appearance.md
+++ b/ej2-angular/diagram/ports-appearance.md
@@ -11,8 +11,8 @@ domainurl: ##DomainURL##
## Appearance
-The appearance of ports can be customized by using[`strokeColor`](https://ej2.syncfusion.com/angular/documentation/api/diagram/port#strokeColor-string),
-[`strokeWidth`](https://ej2.syncfusion.com/angular/documentation/api/diagram/port#strokeWidth-string), [`fill`](https://ej2.syncfusion.com/angular/documentation/api/diagram/port#fill-string) and [`opacity`]() properties of the port. Customize the port size by using the [`width`](https://ej2.syncfusion.com/angular/documentation/api/diagram/port#width-number) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/diagram/port#height-number) properties of port. The ports [`visibility`](https://ej2.syncfusion.com/angular/documentation/api/diagram/port#visibility-boolean) property allows you to define, when the port should be visible.
+The appearance of ports can be customized by using[`strokeColor`](https://ej2.syncfusion.com/angular/documentation/api/diagram/shapeStyleModel/#strokecolor),
+[`strokeWidth`](https://ej2.syncfusion.com/angular/documentation/api/diagram/shapeStyleModel/#strokewidth), [`fill`](https://ej2.syncfusion.com/angular/documentation/api/diagram/shapeStyleModel/#fill) and [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/diagram/shapeStyleModel/#opacity) properties of the port. Customize the port size by using the [`width`](https://ej2.syncfusion.com/angular/documentation/api/diagram/port/#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/diagram/port/#height) properties of port. The ports [`visibility`](https://ej2.syncfusion.com/angular/documentation/api/diagram/port#visibility) property allows you to define, when the port should be visible.
For more information about port visibility refer [`Port Visibility`](#port-visibility)
@@ -48,7 +48,7 @@ The appearance of port can be changed at runtime by customizing the style of por
## Port visibility
-The visibility of the ports is determined by the [`visibility`](https://ej2.syncfusion.com/angular/documentation/api/diagram/port#visibility-boolean) property of port using the [`PortVisibility`](https://ej2.syncfusion.com/angular/documentation/api/diagram/portVisibility/)enum, This enum includes properties such as `Connect`, `Hidden`, `Hover`, and `Visible`. By default, the port visibility is set to **Hidden**.
+The visibility of the ports is determined by the [`visibility`](https://ej2.syncfusion.com/angular/documentation/api/diagram/port/#visibility) property of port using the [`PortVisibility`](https://ej2.syncfusion.com/angular/documentation/api/diagram/portVisibility/)enum, This enum includes properties such as `Connect`, `Hidden`, `Hover`, and `Visible`. By default, the port visibility is set to **Hidden**.
| Property | Definition |
|----|----|
diff --git a/ej2-angular/diagram/ports-interaction.md b/ej2-angular/diagram/ports-interaction.md
index 34c741b7a9..151482ea0b 100644
--- a/ej2-angular/diagram/ports-interaction.md
+++ b/ej2-angular/diagram/ports-interaction.md
@@ -90,10 +90,10 @@ There are several events that can be triggered while interacting with ports. The
| Event| Description|
|----|----|
-| [`Click`](../api/diagram/iClickEventArgs/) | Triggers when the port is clicked. |
-| [`Element Draw`](../api/diagram/iElementDrawEventArgs/) | Triggers when drawing a connector from the port. |
-| [`Position Change`](../api/diagram/iDraggingEventArgs/) | Triggers when the port is dragged. |
-| [`Connection Change`](../api/diagram/iConnectionChangeEventArgs/) | Triggers when a connector is connected or disconnected from the port|
+| [`Click`](https://ej2.syncfusion.com/angular/documentation/api/diagram/iClickEventArgs/) | Triggers when the port is clicked. |
+| [`Element Draw`](https://ej2.syncfusion.com/angular/documentation/api/diagram/iElementDrawEventArgs/) | Triggers when drawing a connector from the port. |
+| [`Position Change`](https://ej2.syncfusion.com/angular/documentation/api/diagram/iDraggingEventArgs/) | Triggers when the port is dragged. |
+| [`Connection Change`](https://ej2.syncfusion.com/angular/documentation/api/diagram/iConnectionChangeEventArgs/) | Triggers when a connector is connected or disconnected from the port|
The following example shows how to get these events in diagram.
diff --git a/ej2-angular/diagram/ports.md b/ej2-angular/diagram/ports.md
index 75577bbb2c..f1a790ce58 100644
--- a/ej2-angular/diagram/ports.md
+++ b/ej2-angular/diagram/ports.md
@@ -54,7 +54,7 @@ The following code explains how to add ports when initializing the node.
## Add ports at runtime
-You can add ports to the nodes at runtime by using the diagram method [`addPorts`](https://ej2.syncfusion.com/angular/documentation/api/diagram#addPorts). The following code illustrates how to add ports to node at runtime.
+You can add ports to the nodes at runtime by using the diagram method [`addPorts`](https://ej2.syncfusion.com/angular/documentation/api/diagram/#addports). The following code illustrates how to add ports to node at runtime.
The port’s ID property is used to define the unique ID for the port and its further used to find the port at runtime.
If ID is not set, then default ID is automatically set.
@@ -73,7 +73,7 @@ If ID is not set, then default ID is automatically set.
## Remove ports at runtime
-You can remove ports at runtime by using diagram method [`removePorts`](https://ej2.syncfusion.com/angular/documentation/api/diagram#removePorts). Refer to the following example which shows how to remove ports at runtime.
+You can remove ports at runtime by using diagram method [`removePorts`](https://ej2.syncfusion.com/angular/documentation/api/diagram/#removeports). Refer to the following example which shows how to remove ports at runtime.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -89,7 +89,7 @@ You can remove ports at runtime by using diagram method [`removePorts`](https:/
## Update port at runtime
-You can change any port properties at runtime and update it through the diagram method [`dataBind`](https://ej2.syncfusion.com/angular/documentation/api/diagram#dataBind).
+You can change any port properties at runtime and update it through the diagram method [`dataBind`].
The following code example illustrates how to change the port properties.
@@ -108,7 +108,7 @@ The following code example illustrates how to change the port properties.
## Specify connection direction to port
-The [`connectionDirection`](https://helpej2.syncfusion.com/angular/documentation/api/diagram/port/#connectionDirection) property of a port allows users to specify the direction in which a connector should establish a connection. This can be either to the port (incoming) or from the port (outgoing).
+The [`connectionDirection`](https://ej2.syncfusion.com/angular/documentation/api/diagram/port/#connectiondirection) property of a port allows users to specify the direction in which a connector should establish a connection. This can be either to the port (incoming) or from the port (outgoing).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
diff --git a/ej2-angular/diagram/ruler.md b/ej2-angular/diagram/ruler.md
index 50bcdcd18a..92ad0819cc 100644
--- a/ej2-angular/diagram/ruler.md
+++ b/ej2-angular/diagram/ruler.md
@@ -81,4 +81,4 @@ The following code demonstrates how to use the `arrangeTick` function to customi
The HorizontalRuler’s [`markerColor`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramRuler/#markercolor) and VerticalRuler’s [`markerColor`](https://ej2.syncfusion.com/angular/documentation/api/diagram/diagramRuler/#markercolor) properties are used to define the ruler marker color and marker will be shown while hovering mouse over the diagram canvas.
-N> The MarkerColor property can be customized using the [`marker`](./style/#customizing-the-ruler) CSS style.
+N> The MarkerColor property can be customized using the [`marker`] CSS style.