feat: upgrade to Angular 20

bootstrap5-demo-with-locales/angular.json

@@ -130,10 +130,30 @@
  "schematics": {
  "@schematics/angular:component": {
  "prefix": "app",
- "style": "scss"
+ "style": "scss",
+ "type": "component"
  },
  "@schematics/angular:directive": {
- "prefix": "app"
+ "prefix": "app",
+ "type": "directive"
+ },
+ "@schematics/angular:service": {
+ "type": "service"
+ },
+ "@schematics/angular:guard": {
+ "typeSeparator": "."
+ },
+ "@schematics/angular:interceptor": {
+ "typeSeparator": "."
+ },
+ "@schematics/angular:module": {
+ "typeSeparator": "."
+ },
+ "@schematics/angular:pipe": {
+ "typeSeparator": "."
+ },
+ "@schematics/angular:resolver": {
+ "typeSeparator": "."
  }
  },
  "cli": {

bootstrap5-demo-with-locales/package.json

@@ -28,16 +28,16 @@
  },
  "private": false,
  "dependencies": {
- "@angular/animations": "^19.2.15",
- "@angular/common": "^19.2.15",
- "@angular/compiler": "^19.2.15",
- "@angular/core": "^19.2.15",
- "@angular/forms": "^19.2.15",
- "@angular/platform-browser": "^19.2.15",
- "@angular/platform-browser-dynamic": "^19.2.15",
- "@angular/router": "^19.2.15",
+ "@angular/animations": "^20.3.6",
+ "@angular/common": "^20.3.6",
+ "@angular/compiler": "^20.3.6",
+ "@angular/core": "^20.3.6",
+ "@angular/forms": "^20.3.6",
+ "@angular/platform-browser": "^20.3.6",
+ "@angular/platform-browser-dynamic": "^20.3.6",
+ "@angular/router": "^20.3.6",
  "@formkit/tempo": "^0.1.2",
- "@ng-select/ng-select": "^14.9.0",
+ "@ng-select/ng-select": "^20.3.1",
  "@slickgrid-universal/composite-editor-component": "^9.9.0",
  "@slickgrid-universal/custom-tooltip-plugin": "^9.9.0",
  "@slickgrid-universal/excel-export": "^9.9.0",
@@ -47,34 +47,34 @@
  "angular-slickgrid": "^9.9.0",
  "bootstrap": "^5.3.8",
  "custom-event-polyfill": "^1.0.7",
- "dompurify": "^3.2.7",
- "ngx-bootstrap": "^19.0.2",
+ "dompurify": "^3.3.0",
+ "ngx-bootstrap": "^20.0.2",
  "rxjs": "^7.8.2",
  "stream-browserify": "^3.0.0",
  "zone.js": "~0.15.1"
  },
  "devDependencies": {
- "@angular-devkit/build-angular": "^19.2.17",
- "@angular-eslint/builder": "^19.8.1",
- "@angular-eslint/eslint-plugin": "^19.8.1",
- "@angular-eslint/eslint-plugin-template": "^19.8.1",
- "@angular-eslint/schematics": "^19.8.1",
- "@angular-eslint/template-parser": "^19.8.1",
- "@angular/cli": "^19.2.17",
- "@angular/compiler-cli": "^19.2.15",
- "@angular/language-service": "^19.2.15",
- "@faker-js/faker": "^10.0.0",
+ "@angular-devkit/build-angular": "^20.3.6",
+ "@angular-eslint/builder": "^20.4.0",
+ "@angular-eslint/eslint-plugin": "^20.4.0",
+ "@angular-eslint/eslint-plugin-template": "^20.4.0",
+ "@angular-eslint/schematics": "^20.4.0",
+ "@angular-eslint/template-parser": "^20.4.0",
+ "@angular/cli": "^20.3.6",
+ "@angular/compiler-cli": "^20.3.6",
+ "@angular/language-service": "^20.3.6",
+ "@faker-js/faker": "^10.1.0",
  "@fnando/sparkline": "^0.3.10",
  "@ngx-translate/core": "^16.0.4",
  "@popperjs/core": "^2.11.8",
  "@types/fnando__sparkline": "^0.3.7",
- "@types/node": "^24.5.2",
- "angular-eslint": "^19.8.1",
- "eslint": "^9.36.0",
+ "@types/node": "^24.8.0",
+ "angular-eslint": "^20.4.0",
+ "eslint": "^9.37.0",
  "eslint-plugin-n": "^17.23.1",
- "sass": "^1.93.0",
+ "sass": "^1.93.2",
  "ts-node": "^10.9.2",
- "typescript": "~5.8.3",
- "typescript-eslint": "^8.44.0"
+ "typescript": "~5.9.3",
+ "typescript-eslint": "^8.46.1"
  }
 }

bootstrap5-demo-with-locales/src/app/examples/example03.component.html

@@ -6,16 +6,16 @@ <h2>
  style="font-size: 18px"
  target="_blank"
  href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/example03.component.ts"
- >
+  >
  <span class="mdi mdi-link-variant"></span> code
  </a>
  </span>
  </h2>
  <div class="subtitle">
  Grid with Inline Editors and onCellClick actions (<a
-  href="https://ghiscoding.gitbook.io/angular-slickgrid/column-functionalities/editors"
-  target="_blank"
-  >Wiki docs</a
+ href="https://ghiscoding.gitbook.io/angular-slickgrid/column-functionalities/editors"
+ target="_blank"
+ >Wiki docs</a
  >).
  <ul>
  <li>
@@ -45,74 +45,78 @@ <h2>
  <span id="radioAutoEdit">
  <label class="radio-inline control-label" for="radioTrue">
  <input type="radio" name="inlineRadioOptions" id="radioTrue" checked [value]="isAutoEdit"
- (change)="setAutoEdit(true)"> ON (single-click)
- </label>
- <label class="radio-inline control-label" for="radioFalse">
- <input type="radio" name="inlineRadioOptions" id="radioFalse" [value]="isAutoEdit"
- (change)="setAutoEdit(false)"> OFF (double-click)
- </label>
- </span>
- <div class="row col-sm-12">
- <span>
- <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="undo()" data-test="undo-btn">
- <i class="mdi mdi-undo"></i>
- Undo last edit(s)
- </button>
- <label class="checkbox-inline control-label" for="autoCommitEdit">
- <input type="checkbox" id="autoCommitEdit" data-test="auto-commit" [checked]="gridOptions.autoCommitEdit"
- (click)="changeAutoCommit()">
- Auto Commit Edit
+ (change)="setAutoEdit(true)"> ON (single-click)
  </label>
- </span>
- </div>
- <div class="row" style="margin-top: 5px">
- <div class="col-sm-12">
- <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="angularGrid.filterService.clearFilters()">
- Clear Filters
- </button>
- <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="angularGrid.sortService.clearSorting()">
- Clear Sorting
- </button>
- <button class="btn btn-sm btn-outline-primary" (click)="addItem()"
- title="Clear Filters &amp; Sorting to see it better">Add item</button>
- <button class="btn btn-sm btn-outline-danger" (click)="deleteItem()">Delete item</button>
- </div>
- </div>
- <div class="row" style="margin-top: 5px">
- <div class="col-sm-12">
- <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="add-title-column"
+ <label class="radio-inline control-label" for="radioFalse">
+ <input type="radio" name="inlineRadioOptions" id="radioFalse" [value]="isAutoEdit"
+ (change)="setAutoEdit(false)"> OFF (double-click)
+ </label>
+ </span>
+ <div class="row col-sm-12">
+ <span>
+ <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="undo()" data-test="undo-btn">
+ <i class="mdi mdi-undo"></i>
+ Undo last edit(s)
+ </button>
+ <label class="checkbox-inline control-label" for="autoCommitEdit">
+ <input type="checkbox" id="autoCommitEdit" data-test="auto-commit" [checked]="gridOptions.autoCommitEdit"
+ (click)="changeAutoCommit()">
+ Auto Commit Edit
+ </label>
+ </span>
+ </div>
+ <div class="row" style="margin-top: 5px">
+ <div class="col-sm-12">
+ <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="angularGrid.filterService.clearFilters()">
+ Clear Filters
+ </button>
+ <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="angularGrid.sortService.clearSorting()">
+ Clear Sorting
+ </button>
+ <button class="btn btn-sm btn-outline-primary" (click)="addItem()"
+ title="Clear Filters &amp; Sorting to see it better">Add item</button>
+ <button class="btn btn-sm btn-outline-danger" (click)="deleteItem()">Delete item</button>
+ </div>
+ </div>
+ <div class="row" style="margin-top: 5px">
+ <div class="col-sm-12">
+ <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="add-title-column"
  (click)="dynamicallyAddTitleHeader()">
- <i class="mdi mdi-shape-square-plus"></i>
- Dynamically Duplicate Title Column
- </button>
- <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="remove-title-column"
+  <i class="mdi mdi-shape-square-plus"></i>
+  Dynamically Duplicate Title Column
+  </button>
+  <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="remove-title-column"
  (click)="dynamicallyRemoveLastColumn()">
- <i class="mdi mdi-minus"></i>
- Dynamically Remove Last Column
- </button>
+ <i class="mdi mdi-minus"></i>
+ Dynamically Remove Last Column
+ </button>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-sm-6">
+ @if (updatedObject) {
+ <div class="alert alert-info">
+ <strong>Updated Item:</strong> {{updatedObject | json}}
+ </div>
+ }
+ @if (alertWarning) {
+ <div class="alert alert-warning">
+ <strong>Updated Item:</strong> {{alertWarning}}
+ </div>
+ }
+ </div>
  </div>
- </div>
- </div>
 
- <div class="col-sm-6">
- <div class="alert alert-info" *ngIf="updatedObject">
- <strong>Updated Item:</strong> {{updatedObject | json}}
- </div>
- <div class="alert alert-warning" *ngIf="alertWarning">
- <strong>Updated Item:</strong> {{alertWarning}}
+ <div class="col-sm-12">
+ <angular-slickgrid gridId="grid3"
+ [columns]="columnDefinitions"
+ [options]="gridOptions"
+ [dataset]="dataset"
+ (onAngularGridCreated)="angularGridReady($event.detail)"
+ (onCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)"
+ (onClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
+ (onValidationError)="onValidationError($event.detail.eventData, $event.detail.args)">
+ </angular-slickgrid>
+ </div>
  </div>
- </div>
- </div>
-
- <div class="col-sm-12">
- <angular-slickgrid gridId="grid3"
- [columns]="columnDefinitions"
- [options]="gridOptions"
- [dataset]="dataset"
- (onAngularGridCreated)="angularGridReady($event.detail)"
- (onCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)"
- (onClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
- (onValidationError)="onValidationError($event.detail.eventData, $event.detail.args)">
- </angular-slickgrid>
- </div>
-</div>

bootstrap5-demo-with-locales/src/app/examples/example03.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import {
  AngularGridInstance,
@@ -63,6 +63,8 @@ const taskFormatter: Formatter = (_row, _cell, value) => {
  standalone: false,
 })
 export class Example3Component implements OnInit {
+ private http = inject(HttpClient);
+
  title = 'Example 3: Editors / Delete';
  subTitle = `
  Grid with Inline Editors and onCellClick actions (<a href="https://ghiscoding.gitbook.io/angular-slickgrid/column-functionalities/editors" target="_blank">Wiki docs</a>).
@@ -95,8 +97,6 @@ export class Example3Component implements OnInit {
  selectedLanguage = 'en';
  duplicateTitleHeaderCount = 1;
 
- constructor(private http: HttpClient) { }
-
  ngOnInit() {
  this.prepareGrid();
  }