| layout | post |
|---|---|
| title | Container in Angular Diagram Component | Syncfusion® |
| description | Learn here all about Container in Syncfusion® Angular Diagram Component of Syncfusion Essential® JS 2 and more. |
| platform | diagram-sdk |
| control | Container |
| documentation | ug |
| domainurl | https://help.syncfusion.com/diagram-sdk |
A Container is a specialized node that groups logically related shapes within a visible boundary. Unlike regular groups, containers automatically manage child elements while maintaining individual element properties. Common use cases include organizing related components in flowcharts, creating swimlanes in process diagrams, and building composite UI layouts.
Container nodes require specific configuration to enable child element management and boundary recognition. The following example demonstrates creating a basic container with essential properties:
{% tabs %} {% highlight ts tabtitle="app.component.ts" %} {% include code-snippet/diagram-sdk/angular/angular/angular/container/container-1/src/app.component.ts %} {% endhighlight %}
{% highlight ts tabtitle="main.ts" %} {% include code-snippet/diagram-sdk/angular/angular/angular/container/container-1/src/main.ts %} {% endhighlight %} {% endtabs %}
{% previewsample "https://help.syncfusion.com/samples/diagram-sdk/angular/help.syncfusion.com/samples/diagram-sdk/angular/help.syncfusion.com/samples/diagram-sdk/angular/container/container-1" %}
Headers provide textual identification for containers and can be fully customized for appearance and behavior. The header property accepts text content, while the header's style property controls visual formatting including fonts, colors, and alignment.
The following example shows header configuration with custom styling:
{% tabs %} {% highlight ts tabtitle="app.component.ts" %} {% include code-snippet/diagram-sdk/angular/angular/angular/container/container-2/src/app.component.ts %} {% endhighlight %}
{% highlight ts tabtitle="main.ts" %} {% include code-snippet/diagram-sdk/angular/angular/angular/container/container-2/src/main.ts %} {% endhighlight %} {% endtabs %}
{% previewsample "https://help.syncfusion.com/samples/diagram-sdk/angular/help.syncfusion.com/samples/diagram-sdk/angular/help.syncfusion.com/samples/diagram-sdk/angular/container/container-2" %}
N> Double-click the header region to enable inline text editing functionality.
Preconfigured container templates can be added to the symbol palette for reusable across diagrams. This approach standardizes container designs and accelerates diagram creation workflows.
For detailed symbol palette integration steps, refer to the Symbol Palette documentation.
The diagram supports drag-and-drop operations for adding elements to containers at runtime. When elements approach a container's boundary, visual feedback indicates drop zones, and the container automatically expands to accommodate new children while maintaining proper spacing.
Containers support the same interactions as regular nodes—such as selection, dragging, resizing, and rotating. For more information refer to the nodes interactions
The events triggered when interacting with container nodes are similar to those for individual nodes. For more information, refer to the nodes events