feat(extras): add igniteui-angular-extras library to monorepo (#16932)

Author: dobromirts

.github/workflows/nodejs.yml

@@ -36,8 +36,12 @@ jobs:
             NODE_OPTIONS: --max_old_space_size=4096
       - name: Lint i18n
         run: npm run lint:i18n
+      - name: Lint Extras
+        run: npm run lint:extras
       - name: Build Lib
         run: npm run build:lib
+      - name: Build Extras
+        run: npm run build:extras
       - name: Build Schematics
         run: npm run build:schematics
       - name: Build Migrations
@@ -51,6 +55,7 @@ jobs:
             npm run test:styles
             npm run test:schematics
             npm run test:i18n
+            npm run test:extras
         env:
             NODE_OPTIONS: --max_old_space_size=4096 --no-experimental-strip-types
             TZ: America/New_York

.github/workflows/npm-publish.yml

@@ -36,6 +36,9 @@ jobs:
       - name: Build igniteui-angular-i18n
         run: npm run build:i18n
 
+      - name: Build igniteui-angular-extras
+        run: npm run build:extras 
+
       - name: Define npm tag
         run: |
             if [[ ${VERSION} == *"alpha"* || ${VERSION} == *"beta"* || ${VERSION} == *"rc"* ]]; then echo "NPM_TAG=next"; else echo "NPM_TAG=latest"; fi >> $GITHUB_ENV
@@ -55,6 +58,12 @@ jobs:
             cp ../../projects/igniteui-angular-i18n/LICENSE LICENSE
         working-directory: dist/igniteui-angular-i18n
 
+      - name: Copy extras files
+        run: |
+            cp ../../projects/igniteui-angular-extras/README.md README.md
+            cp ../../projects/igniteui-angular-extras/LICENSE LICENSE
+        working-directory: dist/igniteui-angular-extras
+
       - name: Create igniteui-angular version
         run: npm version ${VERSION} --no-git-tag-version --save --verbose
         working-directory: dist/igniteui-angular
@@ -63,10 +72,18 @@ jobs:
         run: npm version ${VERSION} --no-git-tag-version --save
         working-directory: dist/igniteui-angular-i18n
 
+      - name: Create igniteui-angular-extras version
+        run: npm version ${VERSION} --no-git-tag-version --save
+        working-directory: dist/igniteui-angular-extras
+
       - name: Publish igniteui-angular
         run: npm publish --tag ${NPM_TAG}
         working-directory: dist/igniteui-angular
 
       - name: Publish igniteui-angular-i18n
         run: npm publish --tag ${NPM_TAG}
         working-directory: dist/igniteui-angular-i18n
+
+      - name: Publish igniteui-angular-extras
+        run: npm publish --tag ${NPM_TAG}
+        working-directory: dist/igniteui-angular-extras

.github/workflows/trigger-licensed-release.yml

@@ -38,3 +38,15 @@ jobs:
               "release_tag": "${{ github.event_name == 'workflow_dispatch' && inputs.release_tag || github.event.release.tag_name }}",
               "public_repo": "${{ github.repository }}"
             }
+
+      - name: Send repository dispatch to private repo for extras
+        uses: peter-evans/repository-dispatch@v3
+        with:
+          token: ${{ steps.app-token.outputs.token }}
+          repository: IgniteUI/igniteui-actions
+          event-type: igniteui-angular-extras-public-release-created
+          client-payload: |
+            {
+              "release_tag": "${{ github.event_name == 'workflow_dispatch' && inputs.release_tag || github.event.release.tag_name }}",
+              "public_repo": "${{ github.repository }}"
+            }

angular.json

@@ -256,6 +256,57 @@
         }
       }
     },
+    "igniteui-angular-extras": {
+      "root": "projects/igniteui-angular-extras",
+      "sourceRoot": "projects/igniteui-angular-extras/src",
+      "projectType": "library",
+      "prefix": "igx",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:ng-packagr",
+          "options": {
+            "tsConfig": "projects/igniteui-angular-extras/tsconfig.lib.json",
+            "project": "projects/igniteui-angular-extras/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/igniteui-angular-extras/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing",
+              "hammerjs"
+            ],
+            "styles": [
+              "src/styles/styles.scss"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "node_modules",
+                "node_modules/@infragistics"
+              ]
+            },
+            "tsConfig": "projects/igniteui-angular-extras/tsconfig.spec.json",
+            "karmaConfig": "projects/igniteui-angular-extras/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/igniteui-angular-extras/**/*.ts",
+              "projects/igniteui-angular-extras/**/*.html"
+            ],
+            "eslintConfig": "projects/igniteui-angular/eslint.config.mjs"
+          }
+        }
+      }
+    },
     "igniteui-angular-elements": {
       "projectType": "application",
       "schematics": {

gulpfile.js

@@ -70,6 +70,15 @@ module.exports.copyMigrations = (cb) => {
     cb();
 };
 
+module.exports.copyExtrasMigrations = (cb) => {
+    gulp.src([
+        './projects/igniteui-angular-extras/migrations/**/*.json',
+        '!**/tsconfig.json'
+    ]).pipe(gulp.dest('./dist/igniteui-angular-extras/migrations'));
+
+    cb();
+};
+
 module.exports.copySchematics = (cb) => {
     gulp.src([
         './projects/igniteui-angular/schematics/**/*.json',

package-lock.json

@@ -6,7 +6,7 @@
     "start": "ng serve --open --hmr",
     "start:elements": "ng serve --project igniteui-angular-elements",
     "start:performance": "ng serve --project igniteui-angular-performance",
-    "build": "npm run build:lib && npm run build:elements && npm run build:schematics && npm run build:migrations && npm run build:i18n",
+    "build": "npm run build:lib && npm run build:elements && npm run build:extras && npm run build:schematics && npm run build:migrations && npm run build:i18n",
     "test": "ng test igniteui-angular",
     "lint": "ng lint",
     "e2e": "ng e2e",
@@ -25,6 +25,10 @@
     "test:elements:watch": "ng test igniteui-angular-elements",
     "build:lib": "ng build igniteui-angular --configuration production && npm run build:styles",
     "build:styles": "node scripts/build-styles.mjs",
+    "build:extras": "ng build igniteui-angular-extras --configuration production && npm run build:extras-migrations",
+    "build:extras-migrations": "gulp copyExtrasMigrations && tsc --listEmittedFiles --project ./projects/igniteui-angular-extras/migrations/tsconfig.json",
+    "test:extras": "ng test igniteui-angular-extras --watch=false --no-progress --code-coverage",
+    "test:extras:watch": "ng test igniteui-angular-extras",
     "build:migrations": "gulp copyMigrations && tsc --listEmittedFiles --project ./projects/igniteui-angular/migrations/tsconfig.json",
     "build:schematics": "gulp copySchematics && tsc --listEmittedFiles --project ./projects/igniteui-angular/schematics/tsconfig.json",
     "build:docs": "npm run build:typedoc:en:production && npm run build:sassdoc:en:production",
@@ -47,6 +51,7 @@
     "build:i18n": "tsc --project projects/igniteui-angular-i18n/tsconfig.build.json && cp projects/igniteui-angular-i18n/package.json dist/igniteui-angular-i18n/package.json",
     "build:bundletest": "ng build bundle-test --configuration production",
     "lint:i18n": "eslint projects/igniteui-angular-i18n/src/**/*.ts",
+    "lint:extras": "ng lint igniteui-angular-extras",
     "test:i18n:dist": "eslint -c projects/igniteui-angular-i18n/eslintrc.dist.i18n.mjs dist/igniteui-angular-i18n",
     "build:elements": "ng build igniteui-angular-elements && npm run pack:elements && gulp copyPackageForElements",
     "pack:elements": "node projects/igniteui-angular-elements/esbuild.mjs && node scripts/build-elements-styles.mjs",
@@ -125,6 +130,8 @@
     "hammer-simulator": "0.0.1",
     "hammerjs": "^2.0.8",
     "ig-typedoc-theme": "^7.0.1",
+    "igniteui-angular-charts": "^21.0.0",
+    "igniteui-angular-core": "^21.0.0",
     "igniteui-dockmanager": "^1.17.0",
     "igniteui-grid-lite": "^0.6.0",
     "igniteui-i18n-resources": "^1.0.2",
@@ -163,6 +170,16 @@
       "astro": {
         "zod": "~3.25.0"
       }
+    },
+    "igniteui-angular-charts": {
+      "@angular/core": "^21.0.0",
+      "@angular/common": "^21.0.0",
+      "@angular/compiler": "^21.0.0"
+    },
+    "igniteui-angular-core": {
+      "@angular/core": "^21.0.0",
+      "@angular/common": "^21.0.0",
+      "@angular/compiler": "^21.0.0"
     }
   }
 }

package.json

@@ -0,0 +1,24 @@
+=================================================================
+
+Infragistics Commercial License for Ignite UI for Angular Extras
+
+=================================================================
+
+This package contains commercial-only features and enhancements for Ignite UI for Angular.
+
+All components, directives, services, and code within this package are licensed under the Infragistics Commercial License (EULA).
+
+This is a commercial product, requiring a valid paid-for license for commercial use.
+This product is free to use for non-commercial educational use for students in K through 12 grades
+or University programs, and for educators to use in a classroom setting as examples/tools in their curriculum.
+
+To verify eligibility for free usage, please register for trial at:
+https://www.infragistics.com/angular and open a support ticket with a request for free license.
+
+To acquire a license for commercial usage, please register for trial at:
+https://www.infragistics.com/angular and refer to the purchasing options in the pricing section on the product page.
+
+© Copyright 2026 INFRAGISTICS. All Rights Reserved.
+The Infragistics Ultimate license & copyright applies to this distribution.
+For information on that license, please go to:
+https://www.infragistics.com/legal/license

projects/igniteui-angular-extras/LICENSE

@@ -0,0 +1,72 @@
+## Ignite UI for Angular Extras
+This package is part of our private npm feed hosted on https://packages.infragistics.com/npm/js-licensed/. If you are building a commercial product or your license has expired, you will need to [acquire a commercial license](https://www.infragistics.com/how-to-buy/product-pricing). There you will find the latest versions of the Ignite UI for Angular packages.
+
+Use our [public repository](https://github.com/IgniteUI/igniteui-angular) for questions, issues and feature requests.
+
+### Start using Ignite UI Angular Extras
+
+#### Create a project from scratch
+1. Execute the following commands
+```
+npm i -g @igniteui/angular-schematics
+ng new <project name> --collection="@igniteui/angular-schematics" --template=<template id>
+cd <project name>
+ng g @igniteui/angular-schematics:component grid <component name>
+npm install igniteui-angular-extras
+```
+
+> Note: If your app needs to be updated from trial to licensed package, check out our [official guide](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing.html#upgrading-packages-using-our-angular-schematics-or-ignite-ui-cli) on the subject. Use `ng g @igniteui/angular-schematics:upgrade-packages`.
+
+
+2. After the package is installed go ahead and:
+
+## Updated Usage
+
+### Before Version 19.x
+
+In versions prior to 19.x, Ignite UI for Angular Extras required adding the `IgxExtrasModule` to your `app.module.ts` to enable components and directives. After installing the package, you would include the module in your `app.module.ts` as follows:
+
+- Add the `IgxExtrasModule` to your app.module.ts
+- Apply `igxChartIntegration`, `igxConditionalFormatting`, `igxContextMenu` directives to your grid:
+
+
+
+```typescript
+import { IgxExtrasModule } from 'igniteui-angular-extras';
+
+@NgModule({
+  declarations: [ ... ],
+  imports: [ IgxExtrasModule, ... ],
+  bootstrap: [ ... ]
+})
+export class AppModule { }
+```
+
+```html
+<igx-grid #grid1 igxChartIntegration igxConditionalFormatting igxContextMenu
+    [autoGenerate]="true" [paging]="true" [data]="localData" >
+</igx-grid>
+```
+
+### After Version 19.x
+
+Since version 19.x, Ignite UI for Angular Extras has adopted standalone components and directives, removing the need to add `IgxExtrasModule` to your `app.module.ts`. You can now directly import the required components and directives as standalone elements.
+
+```typescript
+import { IgxChartIntegrationDirective } from 'igniteui-angular-extras';
+import { IgxConditionalFormattingDirective } from 'igniteui-angular-extras';
+import { IgxContextMenuDirective } from 'igniteui-angular-extras';
+```
+
+```html
+<igx-grid #grid1 igxChartIntegration igxConditionalFormatting igxContextMenu
+    [autoGenerate]="true" [paging]="true" [data]="localData" >
+</igx-grid>
+```
+
+3. Execute `npm run start`
+
+### Build
+
+Execute `npm run build:lib` to build the project. The build artifacts will be stored in the `dist/` directory. By default it builds the project with `--prod` flag for a production build.
+In order to run the project with a small sample, execute `npm run start`

projects/igniteui-angular-extras/README.md

@@ -0,0 +1,47 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+process.env.CHROME_BIN = require('puppeteer').executablePath();
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      'karma-jasmine',
+      'karma-coverage',
+      'karma-chrome-launcher',
+      'karma-spec-reporter'
+    ],
+    client: {
+      clearContext: false,
+      jasmine: {
+        random: false
+      }
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/igniteui-angular-extras'),
+      subdir: '.',
+      reporters: [
+        { type: 'lcov' },
+      ]
+    },
+    reporters: ['spec'],
+    specReporter: {
+      suppressSkipped: true
+    },
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['ChromeHeadlessNoSandbox'],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox', '--disable-gpu', '--window-size=820,800'],
+        debug: false
+      }
+    },
+    singleRun: false
+  });
+};