[{"id":"30488ba5-7390-415f-8c68-0243b845c114","tags":[]},{"id":"51721b8a-987c-4072-81f7-04d7db98079e","tags":[]},{"id":"b5cbea9c-5101-4f6d-9cc8-0ffc079d1f2f","tags":[]},{"id":"5936b99e-db49-4a79-a678-1004bf949a7b","tags":[]},{"id":"adbe5ac6-f5f9-45f1-b163-108aff3bab63","tags":[]},{"id":"9823b933-5a73-416b-80b3-1283fdcd6855","tags":[]},{"id":"a80f6510-29b5-4341-927f-12df86db65c9","tags":[]},{"id":"74856a6c-9993-426b-ac84-14368a61277f","tags":[]},{"id":"749fec9f-7a24-4d99-839c-15fbd22e2249","tags":[]},{"id":"5654fa6e-3aff-44c0-9b40-17454c27b759","tags":[]},{"id":"d419f0d4-cfe7-441b-a36a-17dd9bcc07e5","tags":[]},{"id":"73fab227-0985-4d4a-b7bb-1a79cbd78a55","tags":[]},{"id":"33085370-ebe0-419d-a9ac-1dde6f4e001a","tags":[]},{"id":"958fc79e-9bdb-4673-bd62-1e92e729de6c","tags":[]},{"id":"bf0e6397-13e3-4390-b319-1f9eaeb9f862","tags":[]},{"id":"7cefec3c-ae5c-40bf-8f86-2094d02400cf","tags":[]},{"id":"1b1bcdbd-cc50-4a65-8020-214a95ee155f","tags":[]},{"id":"676c56ad-27c8-4abc-890e-222da05726cc","tags":[]},{"id":"0cdcf6a5-a8d4-4eb0-a3ad-22a1e9943bc4","tags":[]},{"id":"9f3273a8-ecbf-49ad-bd71-23a0e78cfc3e","tags":[]},{"id":"cbeba9c8-06bd-4ba4-810d-261085e6901b","tags":[]},{"id":"93914096-cd00-4590-bdc4-27f3d73ce226","tags":[]},{"id":"6b381fb2-e392-49b1-a4ee-2922bb486234","tags":[]},{"id":"3d3afd14-c4ae-4b63-830c-2cd700fc0d96","tags":[]},{"id":"0199d11d-b647-44fa-bcee-2e8354519499","tags":[]},{"id":"8fdb7ddb-3ab6-4127-8daf-309fd55c1b7d","tags":[]},{"id":"0e99d831-8b39-4ee2-b0d0-3117312114bf","tags":[]},{"id":"5f22acf1-23ba-4719-8e88-32d9d20fca98","tags":[]},{"id":"3be8bf49-82d8-435c-aa02-339d4f3338c6","tags":[]},{"id":"db88ba1e-0863-4361-8006-33e3a09d91da","tags":[]},{"id":"6fb7ebe8-d3a4-4bf0-8f92-36e74a6563d6","tags":[]},{"id":"b77ddac8-eddb-49f9-9f27-3a53f503cbc9","tags":[]},{"id":"6f88fdfc-7de1-40d3-bfdd-3e3b52b4c02e","tags":[]},{"id":"f0c5151f-8b10-4915-bd4d-3e846c3ba565","tags":[]},{"id":"2df1a3c1-5a27-48cf-9392-3f7d0f1d10fd","tags":[]},{"id":"1b886b61-7246-4a95-8af3-443010e84202","tags":[]},{"id":"30760094-4cab-4b4e-bf45-450a1d9ab2cd","tags":[]},{"id":"cfd8e097-b896-46a6-b158-45cf5c0223a3","tags":[]},{"id":"5ab89173-2d1f-433f-9f37-46943f2f915a","tags":[]},{"id":"d988a4b7-2df1-4859-87cc-4760893c53b8","tags":[]},{"id":"4d57b6fe-bb58-4f1b-9cba-48bfb179da8f","tags":[]},{"id":"ccf9a6b6-41ee-4ba9-a2f1-48bfdca6eb9b","tags":[]},{"id":"c6de8b6f-8397-4f41-b416-4a7679698899","tags":[]},{"id":"c2d30698-d2f5-41bf-9824-4a7ba41a3c59","tags":[]},{"id":"1acc9c3e-8bdd-4252-8798-4c4daf6db52c","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"4ce275eb-acaa-42a7-80e7-4e70989e5a51","tags":[]},{"id":"258250a0-dfcc-4544-bad5-50050b715845","tags":[]},{"id":"ed5848f8-e48f-4d05-811f-562482508a93","tags":[]},{"id":"60270ead-8de2-4b6f-aab2-57367c8d5788","tags":[]},{"id":"5241cd02-6a33-41d4-a452-5d21a4c9ef9d","tags":[]},{"id":"fab9a50b-752a-4528-82d5-5de0641b79d8","tags":[]},{"id":"4ec2decd-8d70-4ad3-93f7-5f8ae3d8ef41","tags":[]},{"id":"e327b317-f7b9-4778-a1d2-615706d8d6d3","tags":[]},{"id":"021c7ffe-8801-45cf-833a-63a9d429c280","tags":[]},{"id":"d9accd18-3e6f-4d03-8946-6426e4f631af","tags":[]},{"id":"ff5475f2-3076-4213-a954-651ef502bcb4","tags":[]},{"id":"1c479370-e13d-4232-8ef2-68440293fbd6","tags":[]},{"id":"d889b389-308f-43f4-b9eb-68819f65ed69","tags":[]},{"id":"28b06c74-aa3d-456f-a742-68ef71611818","tags":[]},{"id":"6bc94b2a-df6a-4542-90c6-699f85f8894d","tags":[]},{"id":"c3d83213-d3a6-4b72-8784-6a28641307f1","tags":[]},{"id":"fa5032c2-c72b-45ba-a61b-6ec2179b7929","tags":[]},{"id":"4244ab49-5fec-4a69-8499-6fa00d11d70c","tags":[]},{"id":"acd9c02b-063f-4ef6-a2ba-6ff79919d1e9","tags":[]},{"id":"ef57ac43-723a-4481-9eff-731b499ae718","tags":[]},{"id":"b556fa20-560e-4fdc-a813-76f4c7fbd161","tags":[]},{"id":"468207d4-0b80-43d6-8015-779a62336c97","tags":[]},{"id":"4ad7df78-bc6c-4b75-a902-820c7cb3c6b8","tags":[]},{"id":"5e39da4a-f384-4a65-a015-83ab239b59fe","tags":[]},{"id":"2463d08a-4bd2-484b-86a1-83c3af982d7a","tags":[]},{"id":"346174ba-6be8-468a-b8f8-856f4d5ee503","tags":[]},{"id":"9b7bfe10-919a-4016-918d-8684be39c147","tags":[]},{"id":"74e4fa9e-e913-402d-a041-88bc1ad5afcc","tags":[]},{"id":"dd7f6a1d-f248-430c-aa04-8a22d1206615","tags":[]},{"id":"875e00bb-9921-4dd7-8f47-8b9cfc20eb1b","tags":[]},{"id":"326dc66a-6648-4376-b87c-8ba6ecfcaead","tags":[]},{"id":"ecff1eac-6a04-4e81-829c-8c4994b493f1","tags":[]},{"id":"cab9828e-740b-41a4-bd25-8d1557c4a7d3","tags":[]},{"id":"c2562157-d77f-478f-8202-91f23aec7838","tags":[]},{"id":"aad9a42b-e256-4a22-aa54-95b3e765fc50","tags":[]},{"id":"58dea8ca-62aa-4626-a05c-96b60f21d547","tags":[]},{"id":"d5640b4c-138b-4bb8-9a2c-9b6d9ed361e9","tags":[]},{"id":"c1ffa081-f7b4-497c-b72f-9b79815ec8c0","tags":[]},{"id":"35339514-91cd-43ec-a0b8-9c9e8ef91884","tags":[]},{"id":"a2452259-5976-4fa8-b3c9-a301724aaf2d","tags":[]},{"id":"3bfafc9d-a565-4c5b-a604-a32add506074","tags":[]},{"id":"391befd4-ea8d-452a-afa6-a3aaa70faec0","tags":[]},{"id":"ff52e69b-c2cb-4f6b-8aca-a888044d1da8","tags":[]},{"id":"bddcea3d-7250-403a-8b33-a8c90b30fff4","tags":[]},{"id":"51f4ec3d-b279-4d26-aa5d-a97265cf2f8c","tags":[]},{"id":"5e4ad97f-0f15-4139-bd17-ad7fc58c7e51","tags":[]},{"id":"de23383a-3001-4647-b175-b0eb8f3896a6","tags":[]},{"id":"ba6f38f3-1bfb-41c3-a874-b2730a3fa2fd","tags":[]},{"id":"9707eb42-eb5b-41a3-894d-b4bb520a624d","tags":[]},{"id":"985baaf2-5017-40cd-9cc9-b50fdb4b0b6c","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"4bf2663b-984b-4e88-bbe6-b5c4a492a61f","tags":[]},{"id":"bba20f13-630f-4e13-be18-b65cc3e04954","tags":[]},{"id":"533dc213-4352-44c7-ad46-b6b4c86ad010","tags":[]},{"id":"7fb3e552-f26b-49b9-9f8c-b7028d7bd483","tags":[]},{"id":"2f3d4e1a-9ea3-4dcf-bf5a-b72181e90c6b","tags":[]},{"id":"810146a9-8a85-40bc-b628-b7d90e917d98","tags":[]},{"id":"10febcb9-2165-4b4e-9217-bb148442df6e","tags":[]},{"id":"acb62add-4355-41cd-b711-bf37ac50b173","tags":[]},{"id":"69d1d8f5-6601-44da-a3c1-c3fa850dd5fc","tags":[]},{"id":"b4416ca9-5562-4494-b6f3-c55cb14b73d6","tags":[]},{"id":"d0021535-11df-4b53-8507-c84102069964","tags":[]},{"id":"cda48895-8088-4634-9e44-c92fdfbc024c","tags":[{"name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601","links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e"}]},{"id":"ab47a0d0-8254-41a1-8607-ca9423f1eb07","tags":[]},{"id":"b92017f5-8db2-4f0a-b5af-cb399fe30d2a","tags":[]},{"id":"67a7b6dc-687d-40b6-aa1a-cd0f0fe5d133","tags":[]},{"id":"5ad11031-e70b-48b2-8f59-cd4040f1791c","tags":[]},{"id":"ca4b48de-3ca0-45a4-96e6-ce1161e79acd","tags":[]},{"id":"da91782e-5a25-40d4-af85-ce50e492c66b","tags":[]},{"id":"82595856-e21d-4877-a05e-d0e1c96b73e9","tags":[]},{"id":"91a18307-e7d7-440f-970c-d12aba97ffb6","tags":[]},{"id":"ffa2d47b-fcc6-4609-867b-d1972cac507f","tags":[]},{"id":"5658c95c-16c4-4a07-8dfd-d272db4d4c99","tags":[]},{"id":"628c55d6-ec4f-4165-b9f2-d8f12551a95f","tags":[]},{"id":"87da9e34-5048-4c49-8d82-dabc28195a9f","tags":[]},{"id":"8ef436b5-664a-452f-9be2-dbca22284c5d","tags":[]},{"id":"9d279023-bdf6-49eb-8269-dfc86c4bd94a","tags":[]},{"id":"e9256144-0f4f-42aa-bec6-dff863e347b0","tags":[]},{"id":"9f83dde3-f640-44ed-81e9-e229951049f3","tags":[]},{"id":"f6452ded-f6ef-4db2-a208-eaf367d57272","tags":[]},{"id":"7e28496d-01d9-4f7a-abb2-eb24a16b6be0","tags":[]},{"id":"31017ae4-5eab-43dd-932c-ece124f594a1","tags":[]},{"id":"c1f3b8e6-f741-4aaa-9183-ef882a627d7a","tags":[]},{"id":"b50fa864-5a7e-40d0-881f-f100a18eeb5f","tags":[]},{"id":"ea51304a-cef7-40a5-85a5-f1084ed26ef5","tags":[]},{"id":"64b15da0-3da0-4973-84e2-f6147848374d","tags":[]},{"id":"fc710836-37c6-4b32-8fe1-f7bddd01b205","tags":[]},{"id":"26ca5e43-54a0-4d9c-8c9a-f9a8dfb11976","tags":[]},{"id":"741ca37f-447c-4f0c-b0ff-faea69f26b39","tags":[]},{"id":"7d3584f2-44ae-46bf-bb6a-faf364d09ef5","tags":[]},{"id":"b9eae2f6-bcf7-4cfe-be41-fcdacdefcd21","tags":[]},{"id":"07b722dd-eb18-4bbf-8795-fe9249a9d8d3","tags":[]}]
        
(Showing Draft Content)

ActiveReportsJS Angular Report Designer

This page provides a detailed overview of the ActiveReportsJS Angular Report Designer component. You can check the Get Started tutorial for a concise guide for integrating the report designer component into an Angular application.

ActiveReportsJS Angular NPM package

We distribute the library that contains ActiveReportsJS Angular Report Designer via the @grapecity/activereports-angular npm package. The main @grapecity/activereports package provides the core functionality.

ActiveReportsJS Angular Module

The ActiveReportsJS Angular Report Designer resides in the ActiveReportsModule Angular module, so it should be imported to the application's root module or other module that is intended to use the report designer, for example:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ActiveReportsModule } from "@grapecity/activereports-angular";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ActiveReportsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

ActiveReportsJS Angular Designer Component

You can integrate the ActiveReportsJS Angular Report Designer component with the gc-activereports-designer tag. You can use the following input properties.

Property

Type

Description

hotkeysEnabled

boolean

indicates whether the save and open hotkeys are enabled

language

string

sets the language of Designer Component interface. Check the Localization page for more information

fontSet

"default" | "registered" | "all"

indicates the available font set. Visit the Font Configuration for more information.

dataSources

array of Data Source Templates

sets the Pre-defined data sources and data sets.

reportList

array of Report Resource Info items

sets the Pre-defined report names for a subreport

imageList

array of Image Resource Info items

sets the Pre-defined images for an Image report item

onCreate

onCreate function

adds the New Report button in the designer toolbar and sets the corresponding click handler

onOpen

onOpen function

adds the Open Report button in the designer toolbar and sets the corresponding click handler

onRender

onRender function

adds the Preview Report button in the designer toolbar and sets the corresponding click handler

onSave

onSave function

adds the Save Report button in the designer toolbar and sets the corresponding click handler

onSaveAs

onSaveAs function

adds the Save As.. button in the designer toolbar and sets the corresponding click handler

onOpenFileMenu

onOpenFileMenu function

adds the "File" menu in the designer toolbar and sets the corresponding click handler

report

report object

loads the specified report in the designer

customInitTemplates


sets the report item templates for the designer component

In addition, the parent component can use the getReport, setReport, and processCommand methods of the Designer class instance with ViewChild injection.

@ViewChild(DesignerComponent, { static: false }) reportDesigner: DesignerComponent;