How to Enable Snap to Shape by Default in Angular Designer Applications

The Snap-to-Shape feature in the Bold Reports Designer helps users align report items accurately by displaying snap lines when items are moved or resized. This article explains how to enable the isEnableSnapLine property by default in an Angular application.

Step-by-Step Instructions

Step 1: Update the app.component.ts File

1. Modify the component to access the Bold Reports Designer instance and enable the Snap-to-Shape feature.

export class DesignerComponent {
  public serviceUrl: string;
  private designer: any;

  constructor() {
    // Update this to your Bold Reports API endpoint
    this.serviceUrl = '[insert your API endpoint here]';
  }

  ngAfterViewInit() {
    // Access the Designer instance and enable Snap to Shape.
    this.designer = $('#designer').data('boldReportDesigner');
    this.designer.isEnableSnapLine = true;
  }
}

isEnableSnapLine Property Description

Step 2: Verify the Configuration

1. Save the changes and run the Angular application.
2. Open the Bold Reports Designer.
3. Drag, move, or resize report items on the design surface.
4. Verify that snap lines appear automatically to help align report items.
   
   
   
   
   

Summary

Enabling Snap-to-Shape by default improves design accuracy and enhances the overall report-designing experience in Angular applications that use the Bold Reports Designer.

Related Articles

• Bold Reports Designer Documentation | Views