@bryntum/grid-angular-thin 7.3.3 → 7.3.5

package/README.md

@@ -55,38 +55,39 @@ npm install @bryntum/grid-thin@latest
 
 ## Quick Start
 
-Edit the `src/app/app-module.ts` file and add the following import:
+Update the `src/app/app.ts` file with the following content:
 
 ```typescript
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
+/**
+ * App component script
+ */
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, viewChild } from '@angular/core';
 import { BryntumCoreModule } from '@bryntum/core-angular-thin';
-import { BryntumGridModule } from '@bryntum/grid-angular-thin';
-
-import { AppComponent } from './app';
+import { BryntumGridComponent, BryntumGridModule } from '@bryntum/grid-angular-thin';
+import { gridProps } from './demo.config';
 
-@NgModule({
-    declarations : [
-        AppComponent
-    ],
-    imports      : [
-        BrowserModule,
-        BryntumCoreModule,
-        BryntumGridModule
-    ],
-    providers    : [],
-    bootstrap    : [AppComponent]
+@Component({
+    selector        : 'app-root',
+    imports         : [BryntumCoreModule, BryntumGridModule],
+    templateUrl     : './app.html',
+    styleUrl        : './app.scss',
+    changeDetection : ChangeDetectionStrategy.OnPush,
+    encapsulation   : ViewEncapsulation.None
 })
-export class AppModule {}
+export class App {
+
+    protected readonly gridProps = gridProps;
+
+    protected readonly gridComponent = viewChild.required(BryntumGridComponent);
+}
 ```
 
-Create `src/app/app.config.ts` file with the following content:
+Create the `src/app/demo.config.ts` file with the following content:
 
 ```typescript
-import { BryntumGridProps } from '@bryntum/grid-angular-thin';
+import type { BryntumGridProps } from '@bryntum/grid-angular-thin';
 
-export const gridProps: BryntumGridProps = {
+export const gridProps = {
     columns : [
         {
             text   : 'Name',
@@ -149,31 +150,7 @@ export const gridProps: BryntumGridProps = {
         { id : 24, name : 'James O Connor', age : 34, city : 'Dublin', food : 'Irish Stew', color : 'Green' },
         { id : 25, name : 'Isabelle Chen', age : 31, city : 'Hong Kong', food : 'Dim Sum', color : 'Brown' }
     ]
-};
-```
-
-Update the `src/app/app.ts` file with the following content:
-
-```typescript
-/**
- * App component script
- */
-import { Component, ViewChild } from '@angular/core';
-import { BryntumGridComponent } from '@bryntum/grid-angular-thin';
-import { gridProps } from './app.config';
-
-@Component({
-    selector    : 'app-root',
-    standalone  : false,
-    templateUrl : './app.html',
-    styleUrl    : './app.css'
-})
-export class AppComponent {
-
-    gridProps = gridProps;
-
-    @ViewChild('grid') gridComponent!: BryntumGridComponent;
-}
+} satisfies BryntumGridProps;
 ```
 
 Edit the `src/app/app.html` file and replace the content with the following:
@@ -181,8 +158,8 @@ Edit the `src/app/app.html` file and replace the content with the following:
 ```html
 <bryntum-grid
     #grid
-    [data] = "gridProps.data!"
-    [columns] = "gridProps.columns!"
+    [data] = "gridProps.data"
+    [columns] = "gridProps.columns"
 ></bryntum-grid>
 ```
 
@@ -195,8 +172,8 @@ API packages:
 ```json
 {
   "dependencies": {
-    "@bryntum/core-thin": "7.3.3",
-    "@bryntum/grid-thin": "7.3.3"
+    "@bryntum/core-thin": "7.3.5",
+    "@bryntum/grid-thin": "7.3.5"
   }
 }
 ```
@@ -206,8 +183,8 @@ Framework wrapper packages:
 ```json
 {
   "dependencies": {
-    "@bryntum/core-angular-thin": "7.3.3",
-    "@bryntum/grid-angular-thin": "7.3.3"
+    "@bryntum/core-angular-thin": "7.3.5",
+    "@bryntum/grid-angular-thin": "7.3.5"
   }
 }
 ```
@@ -217,9 +194,9 @@ Framework wrapper packages:
 ```typescript
 import { BryntumGridProps } from '@bryntum/grid-angular-thin';
 
-const gridProps : BryntumGridProps = {
+const gridProps = {
     // Grid configuration
-};
+} satisfies BryntumGridProps;
 ```
 
 ### Product Styling