How to export the Angular Diagram along with background color?

This article explains how to export the Angular diagram along with a background color. In Angular Diagram control, you can export the diagram in specific formats such as SVG, PNG, and JPG. To export and print the diagram, the PrintAndExport module should be injected into the sample. The diagram can be exported with various export options such as region, mode, filename, pageWidth, and more. It can also be exported with a background color that is set for 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.

Refer to the working sample for additional details and implementation:Sample

Conclusion

We hope you enjoyed learning how to export the Angular diagram along with the 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, BoldDesk Support, or feedback portal. We are always happy to assist you!