Bryntum Core supports Angular Using Bryntum Core with Angular

## Requirements Bryntum Core requires Angular `9.0.0` or higher, and TypeScript `3.6.0` or higher. ## Bryntum NPM repository access Please refer to this [guide for Bryntum NPM repository access](#Core/guides/npm-repository.md). ## Bryntum Core The Bryntum Core itself is framework agnostic, but it ships with demos and wrappers to simplify its use with popular frameworks such as Angular. The purpose of this guide is to give you a basic introduction on how to use Bryntum Core with Angular. ## View online demos Bryntum Core Angular demos can be viewed in our [online example browser](https://bryntum.com/products/core/examples/?framework=angular). ## IVY and View Engine wrappers Bryntum Core comes with two npm Angular wrapper packages to support different versions of Angular framework.
IVY View Engine
@bryntum/core-angular is designed to work with Angular 12 and newer versions, which use the IVY rendering engine. It is recommended to use this package if possible. Follow these steps to use the package: Install the package using npm: ```shell npm install @bryntum/core-angular@5.6.0 ``` Import the component in your Angular application: ```typescript import { BryntumCoreComponent } from '@bryntum/core-angular'; ```

@bryntum/core-angular-view is designed to work with Angular 11 and older versions, which use the View Engine for rendering. If you are using one of the legacy Angular versions, you can follow these steps to use the package:

Install the package using npm:

```shell npm install @bryntum/core-angular-view@5.6.0 ```

Import the component in your Angular application:

```typescript import { BryntumCoreComponent } from '@bryntum/core-angular-view'; ```

You may also install View Engine package with npm aliasing and import classes from @bryntum/core-angular:

```shell npm install @bryntum/core-angular@npm@bryntum/core-angular-view@5.6.0 ```

Import the component in your Angular application:

```typescript import { BryntumCoreComponent } from '@bryntum/core-angular'; ```
Do not forget to change wrapper package name accordingly when you import classes.
## Build and run local demos Download distribution zip with demos according to this [guide](#Core/guides/download.md#distribution). Angular demos are located in **examples/frameworks/angular** folder inside distribution zip. Each demo contains bundled `README.md` file in demo folder with build and run instructions. To view and run an example locally in development mode, you can use the following commands: ```shell $ npm install $ npm run start ``` That starts a local server accessible at [http://localhost:4200](http://localhost:4200). If you modify the example code while running it locally it is automatically rebuilt and updated in the browser allowing you to see your changes immediately. The production version of an example, or your application, is built by running: ```shell $ npm install $ npm run build ``` The built version is then located in `dist` sub-folder which contains the compiled code that can be deployed to your production server. The demos have been created with [Angular CLI](https://cli.angular.io/) by `ng new [example-name]` and then implemented using the Bryntum Core wrappers. You can refer to an example while studying this guide to get more information on the implementation. ## TypeScript and Typings Bryntum bundles ship with typings for the classes for usage in TypeScript applications. You can find `core*.d.ts` files in the `build` folder inside the distribution zip package. The definitions also contain a special config type which can be passed to the class constructor. The config specific types are also accepted by multiple other properties and functions, for example the [Store.data](#Core/data/Store#config-data) config of the `Store` which accepts type `Partial[]`. Sample code for tree store creation with `ModelConfig` and `StoreConfig` classes: ```typescript import { Store, StoreConfig, ModelConfig } from '@bryntum/core'; const storeConfig: Partial = { tree : true, data : [ { id : 1, children : [ { id : 2 } ] as Partial[] } ] as Partial[] }; new Store(storeConfig); ``` ## Wrappers The Angular wrappers encapsulate Bryntum Core and other Bryntum widgets in Angular components that expose configuration options, properties, features and events. The wrapped all Bryntum UI components so they can be used the usual Angular way. To use native API package classes with wrappers import them from `@bryntum/core`. ```typescript import { Core } from '@bryntum/core'; ``` ### Installing the wrappers package The wrappers are distributed as a separate package `@bryntum/core-angular` that is installed according to the used package manager. Please refer to this [guide for Bryntum NPM repository access](#Core/guides/npm-repository.md). ### Wrappers Overview Wrappers are Angular components which provide full access to Bryntum API widget class configs, properties, events and features. Each Wrapper has it's own HTML tag which can be used in angular templates. This is the list of available wrappers for Bryntum Core Angular package: | Wrapper tag name | Wrapper component name (API widget reference) | |------------------|-----------------------------------------------| | <bryntum-button/> | [BryntumButtonComponent](#Core/widget/Button) | | <bryntum-button-group/> | [BryntumButtonGroupComponent](#Core/widget/ButtonGroup) | | <bryntum-checkbox/> | [BryntumCheckboxComponent](#Core/widget/Checkbox) | | <bryntum-chip-view/> | [BryntumChipViewComponent](#Core/widget/ChipView) | | <bryntum-color-field/> | [BryntumColorFieldComponent](#Core/widget/ColorField) | | <bryntum-color-picker/> | [BryntumColorPickerComponent](#Core/widget/ColorPicker) | | <bryntum-combo/> | [BryntumComboComponent](#Core/widget/Combo) | | <bryntum-container/> | [BryntumContainerComponent](#Core/widget/Container) | | <bryntum-date-field/> | [BryntumDateFieldComponent](#Core/widget/DateField) | | <bryntum-date-picker/> | [BryntumDatePickerComponent](#Core/widget/DatePicker) | | <bryntum-date-time-field/> | [BryntumDateTimeFieldComponent](#Core/widget/DateTimeField) | | <bryntum-display-field/> | [BryntumDisplayFieldComponent](#Core/widget/DisplayField) | | <bryntum-duration-field/> | [BryntumDurationFieldComponent](#Core/widget/DurationField) | | <bryntum-field-filter-picker/> | [BryntumFieldFilterPickerComponent](#Core/widget/FieldFilterPicker) | | <bryntum-field-filter-picker-group/> | [BryntumFieldFilterPickerGroupComponent](#Core/widget/FieldFilterPickerGroup) | | <bryntum-file-field/> | [BryntumFileFieldComponent](#Core/widget/FileField) | | <bryntum-file-picker/> | [BryntumFilePickerComponent](#Core/widget/FilePicker) | | <bryntum-filter-field/> | [BryntumFilterFieldComponent](#Core/widget/FilterField) | | <bryntum-label/> | [BryntumLabelComponent](#Core/widget/Label) | | <bryntum-list/> | [BryntumListComponent](#Core/widget/List) | | <bryntum-menu/> | [BryntumMenuComponent](#Core/widget/Menu) | | <bryntum-number-field/> | [BryntumNumberFieldComponent](#Core/widget/NumberField) | | <bryntum-paging-toolbar/> | [BryntumPagingToolbarComponent](#Core/widget/PagingToolbar) | | <bryntum-panel/> | [BryntumPanelComponent](#Core/widget/Panel) | | <bryntum-password-field/> | [BryntumPasswordFieldComponent](#Core/widget/PasswordField) | | <bryntum-radio/> | [BryntumRadioComponent](#Core/widget/Radio) | | <bryntum-radio-group/> | [BryntumRadioGroupComponent](#Core/widget/RadioGroup) | | <bryntum-slider/> | [BryntumSliderComponent](#Core/widget/Slider) | | <bryntum-slide-toggle/> | [BryntumSlideToggleComponent](#Core/widget/SlideToggle) | | <bryntum-splitter/> | [BryntumSplitterComponent](#Core/widget/Splitter) | | <bryntum-tab-panel/> | [BryntumTabPanelComponent](#Core/widget/TabPanel) | | <bryntum-text-area-field/> | [BryntumTextAreaFieldComponent](#Core/widget/TextAreaField) | | <bryntum-text-area-picker-field/> | [BryntumTextAreaPickerFieldComponent](#Core/widget/TextAreaPickerField) | | <bryntum-text-field/> | [BryntumTextFieldComponent](#Core/widget/TextField) | | <bryntum-time-field/> | [BryntumTimeFieldComponent](#Core/widget/TimeField) | | <bryntum-time-picker/> | [BryntumTimePickerComponent](#Core/widget/TimePicker) | | <bryntum-toolbar/> | [BryntumToolbarComponent](#Core/widget/Toolbar) | | <bryntum-widget/> | [BryntumWidgetComponent](#Core/widget/Widget) | | <bryntum-year-picker/> | [BryntumYearPickerComponent](#Core/widget/YearPicker) | ### Import BryntumCoreModule Add the following code to your `app.module.ts`: ```typescript import { BryntumCoreModule } from '@bryntum/core-angular' @NgModule({ imports : [ BryntumCoreModule ] }) ``` Then you will be able to use the custom tag like `` and others listed above the same way as you use your application components. Our examples are built this way so you can refer to them to see how to use the tag and how to pass parameters. ### Using the wrapper in your application Now you can use the component defined in the wrapper in your application: ```html ``` You will also need to import CSS file for Bryntum Core. We recommend to do it in `src/styles.scss`: ```typescript @import "@bryntum/core/core.material.css"; // other application-global styling ``` ### Embedding widgets inside wrapper Wrappers are designed to allow using Bryntum widgets as Angular components, but they themselves cannot contain other Bryntum wrappers inside their tag. To embed Bryntum widgets inside a wrapper you should instead use the available configuration options for the wrapper's widget. Please note that not all widgets may contain inner widgets, please refer to the API docs to check for valid configuration options. This example shows how to use a `Toolbar` widget inside the wrapper for Bryntum Core: Sample code for `app.component.ts`: ```typescript export class AppComponent { // Toolbar (tbar) config tbarConfig = { items : [ { type : 'button', text : 'My button' } ] } } ``` Sample code for `app.component.html`: ```html ``` ## Using Angular components as renderers To use an Angular component as column renderer, header renderer or tooltip renderer define a custom element using the Angular component which you want to use as the renderer. It can be done in `src/app/app.module.ts`: ```typescript // The component used for custom tag definition import { ColorRendererComponent } from './color-renderer/color-renderer.component'; // Function to create the custom element import { createCustomElement } from '@angular/elements'; // ... other required imports @NgModule({ declarations : [ AppComponent, ColorRendererComponent ], // These component(s) will be converted to Custom Elements entryComponents : [ ColorRendererComponent ], imports : [ BrowserModule, BryntumCoreModule ], providers : [], bootstrap : [AppComponent] }) export class AppModule { constructor(injector: Injector) { // convert Angular Component to Custom Element and register it with browser customElements.define('color-renderer', createCustomElement(ColorRendererComponent, { injector })); } } ``` The above renderer then can be used, for example, as a column renderer: ```typescript columns : [ { text : 'Angular Component', field : 'color', htmlEncode : false, // to prevent encoding of renderer output renderer(data: any) { const { record, value } = data; // Use registered Custom Element tag name and pass it attributes return ``; } } ] ``` This approach is used in [Grid Angular Renderer demo](https://bryntum.com/products/grid/examples/frameworks/angular/angular-renderer/). The renderers are used the same way also for Scheduler, Gantt, Calendar and others. ## Configs, properties and events All Bryntum Angular Wrappers support the full set of the public configs, properties and events of a component. ## Features Features are suffixed with `Feature` and act as both configs and properties for `BryntumCoreComponent`. They are mapped to the corresponding API features of the Bryntum Core `instance`. This is a list of all `BryntumCoreComponent` features: |Wrapper feature name|API feature reference | |--------------------|----------------------| ## Bryntum Core API instance It is important to know that the Angular `BryntumCoreComponent` is **not** the native Bryntum Core instance, it is a wrapper or an interface between the Angular application and the Bryntum Core itself. All available configs, properties and features are propagated from the wrapper down to the underlying Bryntum Core instance, but there might be the situations when you want to access the Bryntum Core directly. That is fully valid approach and you are free to do it. ### Accessing the Bryntum Core instance If you need to access Bryntum Core functionality not exposed by the wrapper, you can access the Bryntum Core instance directly. Within the wrapper it is available under the `instance` property. This simple example shows how you could use it: app.component.html ```html ``` Sample code for `app.component.ts`: ```typescript import { BryntumCoreComponent } from '@bryntum/core-angular'; import { Core } from '@bryntum/core'; export class AppComponent implements AfterViewInit { @ViewChild(BryntumCoreComponent, { static : false }) coreComponent: BryntumCoreComponent; private core : Core; @ViewChild(BryntumCoreComponent, { static : false }) coreComponent: BryntumCoreComponent; ngAfterViewInit(): void { // store Bryntum Core isntance this.core = this.coreComponent.instance; } } ``` When accessing `instance` directly, use wrapper's API widget reference docs from the list above to get available configs and properties. ## Troubleshooting Please refer to this [Troubleshooting guide](#Core/guides/integration/angular/troubleshooting.md). ## References * Config options, features, events and methods [Bryntum Core API docs](#api) * Visit [Angular Framework Homepage](https://angular.io) * Post your questions to [Bryntum Support Forum](https://forum.bryntum.com/) * [Contact us](https://bryntum.com/contact/)

Last modified on 2023-10-26 8:26:30