Using components as diagram shapes in Angular Diagram
There are different types of shapes in the diagram, such as Text, Image, HTML, and more. An Angular component is also used as a diagram node.
The following code sample shows how to set the node properties. By using the node’s shape property, the Angular component can be used as a diagram node. To define the Angular component inside the node, set the node’s shape as HTML.
The following code sample shows how to set the node properties. By using the node’s shape property, the Angular component can be used as a diagram node. To define the Angular component inside the node, set the node’s shape as HTML.
public nodes: NodeModel[] = [
{
id: 'node1_template', offsetX: 160, offsetY: 250, width: 300, height: 300,
shape: { type: "HTML" }
},
{
id: 'node1_template2', offsetX: 380, offsetY: 170, width: 100, height: 50,
shape: { type: "HTML" }
},
{
id: 'node1_template3', offsetX: 520, offsetY: 180, width: 100, height: 50,
shape: { type: "HTML" }
}
];
The following code shows how to set the Angular component as a node. It can be done by using the nodeTemplate property. Here, Angular dropdown, Angular textbox, and Angular checkbox are used as diagram nodes.
<ng-template #nodeTemplate let-data> <ng-container *ngIf="data.id == 'node1_template'"> div style="margin: 0px auto; width:250px; padding-top: 40px;"> <ejs-dropdownlist id='games' #sample [dataSource]='sportsData' (change)='onChange($event)' [value]='value' [fields]='fields' [placeholder]='waterMark' [popupHeight]='height'></ejs-dropdownlist> </div> </ng-container> <ng-container *ngIf="data.id == 'node1_template2'"> <ejs-textbox id="textbox" value = "Textbox"></ejs-textbox> </ng-container> <ng-container *ngIf="data.id == 'node1_template3'"> <ejs-checkbox id="checkbox"></ejs-checkbox> </ng-container> </ng-template>
Refer to the working sample for additional details and implementation: Sample
