How to export the Angular Diagram along with background color?

In Angular Diagram control, you can export the diagram with specific formats such as SVG, PNG, and JPG. To export and print the diagram, the PrintAndExport module should be injected into the sample. Diagram can be exported with some export options such as region, mode, filename, pageWidth, and more. It can also be exported with a background color that is set to the diagram. The following code shows how to set the background color dynamically to the diagram page and export that diagram.

app.component.html

   <div style="width: 100%;height: 10%">
    <input ejs-colorpicker="" id="inline-color-palette" type="color" mode="Palette" value="#000" (change)="change($event)">
   <button ejs-button="" id="export">export</button>
   </div>

app.component.ts

   //To render the diagram with background color
         ngOnInit(): void {
             document.getElementById('export').onclick = this.documentClick.bind(this);
             this.pageSettings = {
                 background: {
                 color: 'transparent'
             },
             width: 1250,
             height: 700,
             }
       }
   //To render the color picker event
       public change(args: ClickEventArgs): void {
                this.diagram.pageSettings.background = { color: (args as any).currentValue.rgba };
              this.diagram.dataBind();
        }
        
   //export the diagram to image format
    public documentClick(args: ClickEventArgs): void {
       let exportOptions: IExportOptions = {};
       exportOptions.mode = 'Download';
       exportOptions.stretch = 'None';
       exportOptions.margin =  { left: 20, right: 20, top: 20, bottom: 20};
       exportOptions.region = 'PageSettings';
       exportOptions.fileName = 'Export';
       exportOptions.pageHeight = 700;
       exportOptions.pageWidth = 1250;
       this.diagram.exportDiagram(exportOptions);
 }

In the given code, a color picker control is employed to select the color for the diagram background page. When a color is chosen using the color picker, the color picker’s change event is triggered. During this event, the user-selected color is applied to the diagram’s pageSettings background property. Subsequently, you can click the export button to export the diagram to an image format.

Sample

Conclusion
I hope you enjoyed learning how to export the Angular Diagram along with background color.

You can refer to our Angular Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!