Build the report in Angular from code by creating its structure and configuring the required components.

Building the report. Construct the report hierarchy in code, configure the required objects, add them to the template, and render the result.
@Component({
    selector: "creating-report-at-runtime",
    imports: [Viewer],
    template: `<sti-viewer [report]="report"></sti-viewer>`
})

export class CreatingReportAtRuntime {
    report: Stimulsoft.Report.StiReport;

    constructor() {
        this.report = new Stimulsoft.Report.StiReport();

        // Add data to datastore
        var dataSet = new Stimulsoft.System.Data.DataSet();
        dataSet.readJsonFile("Data/Demo.json");
        this.report.regData("Demo", "Demo", dataSet);

        // Fill dictionary
        this.report.dictionary.synchronize();

        var page = this.report.pages.getByIndex(0);

        // Create HeaderBand
        var headerBand = new Stimulsoft.Report.Components.StiHeaderBand();
        headerBand.height = 0.5;
        headerBand.name = "HeaderBand";
        page.components.add(headerBand);

        // Create text on header
        var headerText = new Stimulsoft.Report.Components.StiText(new Stimulsoft.System.Drawing.Rectangle(0, 0, 5, 0.5));
        headerText.text = "CompanyName";
        headerText.horAlignment = Stimulsoft.Base.Drawing.StiTextHorAlignment.Center;
        headerText.name = "HeaderText";
        headerText.brush = new Stimulsoft.Base.Drawing.StiSolidBrush(Stimulsoft.System.Drawing.Color.lightGreen);
        headerBand.components.add(headerText);

        // Create Databand
        var dataBand = new Stimulsoft.Report.Components.StiDataBand();
        dataBand.dataSourceName = "Customers";
        dataBand.height = 0.5;
        dataBand.name = "DataBand";
        page.components.add(dataBand);

        // Create text
        var dataText = new Stimulsoft.Report.Components.StiText(new Stimulsoft.System.Drawing.Rectangle(0, 0, 5, 0.5));
        dataText.text = "{Line}.{Customers.CompanyName}";
        dataText.name = "DataText";
        dataBand.components.add(dataText);

        // Create FooterBand
        var footerBand = new Stimulsoft.Report.Components.StiFooterBand();
        footerBand.height = 0.5;
        footerBand.name = "FooterBand";
        page.components.add(footerBand);

        // Create text on footer
        var footerText = new Stimulsoft.Report.Components.StiText(new Stimulsoft.System.Drawing.Rectangle(0, 0, 5, 0.5));
        footerText.text = "Count: {Count()}";
        footerText.horAlignment = Stimulsoft.Base.Drawing.StiTextHorAlignment.Right;
        footerText.name = "FooterText";
        footerText.brush = new Stimulsoft.Base.Drawing.StiSolidBrush(Stimulsoft.System.Drawing.Color.lightGreen);
        footerBand.components.add(footerText);
    }
}

Bands such as StiHeaderBand, StiDataBand and StiFooterBand are added to a page, and StiText components are placed on them; the data band is bound through dataSourceName and expressions like {Customers.CompanyName}.

By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.