Page settings in Angular Diagram Component
25 Aug 202524 minutes to read
Page settings enable comprehensive customization of the diagram’s canvas, including dimensions, appearance, orientation, and interactive boundaries. These settings provide control over how the diagram content is displayed and how users can interact with the drawing surface.
Page size and appearance
The diagram page dimensions are controlled through the width and height properties in page settings. The page appearance can be customized using the background property, which includes options for setting the background color and other visual properties. The margin property defines spacing around the page content.
For comprehensive details on all available properties, refer to the Page Settings API reference.
The following example demonstrates how to customize basic page settings including dimensions, background color, and margins.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, NodeModel, PageSettingsModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule
],
providers: [ ],
standalone: true,
selector: "app-container",
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults' [pageSettings]="pageSettings">
<e-nodes>
<e-node id='node1' [offsetX]=150 [offsetY]=150>
<e-node-annotations>
<e-node-annotation id="label1" content="Rectangle1">
</e-node-annotation>
</e-node-annotations>
</e-node>
<e-node id='node2' [offsetX]=300 [offsetY]=350>
<e-node-annotations>
<e-node-annotation id="label1" content="Rectangle2">
</e-node-annotation>
</e-node-annotations>
</e-node>
</e-nodes>
<e-connectors>
<e-connector id='connector' sourceID='node1' targetID='node2'>
</e-connector>
</e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public pageSettings?: PageSettingsModel;
ngOnInit(): void {
// Defines the pageSettings for the diagram
this.pageSettings = {
// Sets the Page Break for diagram
showPageBreaks: true,
// Defines the background color and image of diagram
background: {
color: 'grey'
},
// Sets the width for the Page
width: 300,
// Sets the height for the Page
height: 300,
// Sets the space to be left between an annotation and its parent node/connector
margin: {
left: 10,
top: 10,
bottom: 10
},
}
}
public getNodeDefaults(node: NodeModel): NodeModel {
node.height = 100;
node.width = 100;
return node;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Set background image
Background images can be applied to the diagram page using the source property of the background configuration. The scale property controls how the background image is sized and stretched, while the align property determines the image positioning within the diagram page boundaries.
The following code example shows how to configure a background image for the diagram page.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, PageSettingsModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule
],
providers: [ ],
standalone: true,
selector: "app-container",
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [pageSettings]="pageSettings">
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public pageSettings?: PageSettingsModel;
ngOnInit(): void {
// Defines the pageSettings for the diagram
this.pageSettings = {
orientation: 'Landscape',
showPageBreaks: true,
// Defines the background Image source
background: {
source: 'https://www.w3schools.com/images/w3schools_green.jpg',
// Defines the scale values for the background image
scale:'Meet',
// Defines the align values for the background image
align:'XMinYMin'
},
width: 300,
height: 300,
margin: {
left: 10,
top: 10,
bottom: 10
},
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Page orientation
The diagram supports two page orientations:
- Landscape: Wider than tall (default orientation)
- Portrait: Taller than wide
When the orientation changes, the diagram automatically swaps the width and height values to maintain the specified page dimensions. For example, if a page is configured with width: 800 and height: 600 in landscape mode, switching to portrait orientation will result in width: 600 and height: 800.
The following example demonstrates how orientation affects page dimensions by switching from the default landscape to portrait mode.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, NodeModel, PageSettingsModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule
],
providers: [ ],
standalone: true,
selector: "app-container",
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults' [pageSettings]="pageSettings">
<e-nodes>
<e-node id='node1' [offsetX]=150 [offsetY]=150>
<e-node-annotations>
<e-node-annotation id="label1" content="Rectangle1" >
</e-node-annotation>
</e-node-annotations>
</e-node>
<e-node id='node2' [offsetX]=300 [offsetY]=350>
<e-node-annotations>
<e-node-annotation id="label1" content="Rectangle2" >
</e-node-annotation>
</e-node-annotations>
</e-node>
</e-nodes>
<e-connectors>
<e-connector id='connector' sourceID='node1' targetID='node2'>
</e-connector>
</e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public pageSettings?: PageSettingsModel;
ngOnInit(): void {
// Defines the pageSettings for the diagram
this.pageSettings = {
// Sets the PageOrientation for the diagram to page
orientation: 'Portrait',
// Sets the Page Break for diagram
showPageBreaks: true,
// Defines the background color and image of diagram
background: {
color: 'grey'
},
// Sets the width for the Page
width: 500,
// Sets the height for the Page
height: 300,
// Sets the space to be left between an annotation and its parent node/connector
margin: {
left: 10,
top: 10,
bottom: 10
},
}
}
public getNodeDefaults(node: NodeModel): NodeModel {
node.height = 100;
node.width = 100;
return node;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Multiple pages and page breaks
The diagram can extend across multiple pages when the content exceeds the defined page boundaries. When multiple pages are enabled, the total canvas size automatically expands in increments of the specified page width and height to accommodate all diagram elements. Page breaks provide visual indicators showing where one page ends and another begins, which is particularly useful for print layout planning.
The multiplePage property enables the multi-page functionality, while the showPageBreak property controls the visibility of page break lines.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, NodeModel, PageSettingsModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule
],
providers: [ ],
standalone: true,
selector: "app-container",
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults' [pageSettings]="pageSettings">
<e-nodes>
<e-node id='node1' [offsetX]=150 [offsetY]=150>
<e-node-annotations>
<e-node-annotation id="label1" content="Rectangle1">
</e-node-annotation>
</e-node-annotations>
</e-node>
<e-node id='node2' [offsetX]=350 [offsetY]=350>
<e-node-annotations>
<e-node-annotation id="label1" content="Rectangle2">
</e-node-annotation>
</e-node-annotations>
</e-node>
</e-nodes>
<e-connectors>
<e-connector id='connector' sourceID='node1' targetID='node2'>
</e-connector>
</e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public pageSettings?: PageSettingsModel;
ngOnInit(): void {
// Defines the pageSettings for the diagram
this.pageSettings = {
// Sets the Multiple page for diagram
multiplePage: true,
// Sets the Page Break for diagram
showPageBreaks: true,
width: 300,
height: 300,
}
}
public getNodeDefaults(node: NodeModel): NodeModel {
node.height = 100;
node.width = 100;
return node;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));The appearance of page break lines can be customized by overriding the styles of the .e-diagram-page-break CSS class. For detailed styling options, refer to the CSS customization documentation.
Boundary constraints
Boundary constraints define the interactive region within which diagram elements can be manipulated. These constraints control where users can drag, resize, or rotate elements, providing control over the usable area of the diagram canvas. The boundaryConstraints property in page settings manages these restrictions.
The three types of boundary constraints are:
- Infinity: Elements can be moved without any boundary restrictions
- Diagram: Elements are constrained within the overall diagram area
- Page: Elements are restricted to the defined page boundaries
For detailed information about each constraint type and their behavior, refer to the Boundary Constraints documentation.
The following example shows how to configure boundary constraints to restrict element movement within specific boundaries.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, NodeModel, PageSettingsModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule
],
providers: [ ],
standalone: true,
selector: "app-container",
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults' [pageSettings]="pageSettings">
<e-nodes>
<e-node id='node1' [offsetX]=150 [offsetY]=150>
<e-node-annotations>
<e-node-annotation id="label1" content="Rectangle1" >
</e-node-annotation>
</e-node-annotations>
</e-node>
<e-node id='node2' [offsetX]=350 [offsetY]=150>
<e-node-annotations>
<e-node-annotation id="label1" content="Rectangle2" >
</e-node-annotation>
</e-node-annotations>
</e-node>
</e-nodes>
<e-connectors>
<e-connector id='connector' type='Orthogonal' sourceID='node1' targetID='node2'>
</e-connector>
</e-connectors>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public pageSettings?: PageSettingsModel;
ngOnInit(): void {
// Defines the pageSettings for the diagram
this.pageSettings = {
// Sets the BoundaryConstraints to page
boundaryConstraints: 'Page',
background: {
color: 'grey'
},
width: 400,
height: 400,
showPageBreaks: true,
}
}
public getNodeDefaults(node: NodeModel): NodeModel {
node.height = 100;
node.width = 100;
return node;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Fit options
The fitOptions configuration controls how diagram content is positioned and scaled within the viewport. These options are particularly useful for automatically centering content and ensuring optimal visibility when the diagram loads.
Key fit option properties:
- canFit: Centers the diagram content within the viewport during initial rendering
- region: Specifies whether to fit the page content or custom bounds to the viewport center
- customBounds: Defines specific rectangular bounds when using CustomBounds for the region property
- canZoomIn: Enables automatic zoom adjustments to fit smaller content within the available viewport space
- margin: Sets spacing around the fitted content within the viewport boundaries
- mode: Determines the fitting approach - ‘Page’ (default), ‘Width’, or ‘Height’ for dimension-specific constraints
The region property offers different fitting strategies, and when set to CustomBounds, the customBounds property allows precise control over which area should be fitted within the viewport.
The following example demonstrates the configuration and usage of fit options for automatic content positioning.
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent, PageSettingsModel } from '@syncfusion/ej2-angular-diagrams';
@Component({
imports: [
DiagramModule
],
providers: [ ],
standalone: true,
selector: "app-container",
template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [pageSettings]="pageSettings">
<e-nodes>
<e-node id='node1' [offsetX]=200 [offsetY]=200 [width]=100 [height]=100>
<e-node-annotations>
<e-node-annotation id="label1" content="Node fits at the center of view port">
</e-node-annotation>
</e-node-annotations>
</e-node>
</e-nodes>
</ejs-diagram>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild("diagram")
public diagram?: DiagramComponent;
public pageSettings?: PageSettingsModel;
ngOnInit(): void {
// Defines the pageSettings for the diagram
this.pageSettings = {
width: 500,
height: 500,
background: { color: 'grey' },
fitOptions: {
// Fits the content to the center of the viewport
canFit: true,
// Allows zooming in to fit smaller content
canZoomIn: true,
// Specifies the region to fit to the center
region: 'Content',
// Specifies the mode of fitOptions
mode: 'Page',
// Defines the margin around the fitted content
margin: { left: 50, right: 50, top: 50, bottom: 50 },
}
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));