Integrated latest changes at 04-15-2025 10:30:58 PM

Author: SyncfusionBuild

ej2-angular-toc.html

@@ -42,7 +42,6 @@
  <li><a href="/ej2-angular/getting-started/aspnet-mvc">Angular with ASP.NET MVC</a></li>
  <li><a href="/ej2-angular/getting-started/ionic">Angular with Ionic</a></li>
  <li><a href="/ej2-angular/getting-started/electron">Angular with Electron</a></li>
- <li><a href="/ej2-angular/getting-started/systemjs">Angular with SystemJS</a></li>
 </ul>
 </li>
 <li>
@@ -101,7 +100,6 @@
 Frameworks and Feature
 <ul>
   <li><a href="/ej2-angular/frameworks-and-feature/tree-shaking">Angular Tree Shaking</a></li>
-  <li><a href="/ej2-angular/frameworks-and-feature/angular-aot">Ahead-of-Time Compilation</a></li>
   <li><a href="/ej2-angular/frameworks-and-feature/angular-universal">Angular Universal</a></li>
   <li><a href="/ej2-angular/frameworks-and-feature/lazy-loading-support">Angular Lazy Loading</a></li>
   <li>Testing

ej2-angular/Release-notes/29.1.38.md

@@ -84,4 +84,7 @@ documentation: ug
 | Skeleton | 44 | 44 | 0 | All Passed |
 | ListView | 43 | 43 | 0 | All Passed |
 | Signature | 40 | 40 | 0 | All Passed |
-| RadioButton | 37 | 37 | 0 | All Passed |
+| RadioButton | 37 | 37 | 0 | All Passed |
+| Grid | 1510 | 1510 | 0 | All Passed |
+| PivotGrid | 1977 | 1977 | 0 | All Passed |
+| ImageEditor | 1583 | 1583 | 0 | All Passed |

ej2-angular/browser.md

@@ -10,51 +10,52 @@ domainurl: ##DomainURL##
 
 # Browser Compatibility in Angular
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> Angular UI components are compatible with modern browsers. The following versions are supported:
+Syncfusion<sup style="font-size:70%">&reg;</sup> Angular UI components are designed to work seamlessly with modern web browsers. This document outlines the supported browser versions and provides key information on browser compatibility.
 
-|    Chrome    |    Firefox    |    Opera     |    Edge    |    IE      |    Safari    |    iOS    |    Android    |    Windows Mobile    |
-|:--------------:|:---------------:|:--------------:|:------------:|:------------:|:--------------:|:-----------:|:---------------:|:--------------:|
-|    63+    |    58+    |    50+    |    13+    |    11+    |    9+    |    9+    |    4.4+    |    IE 11+    |
+## Supported Browser Versions
 
-## Required Polyfills
+The following table lists the minimum supported versions for various browsers:
 
-A polyfill is code that provides modern functionality on older browsers that lack native support.
+| Browser | Supported Versions |
+|:--------|:-------------------|
+| Google Chrome, including Android & iOS  | Latest 2 versions |
+| Mozilla Firefox	 | Latest version |
+| Microsoft Edge	    | Latest 2 versions |
+| Apple Safari, including iOS	  | Latest 2 versions |
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> Angular UI components are compatible with Internet Explorer 11 (IE 11) when using the ES6 Promise polyfill.
 
-## Ways to Add Polyfills
+> Note: "Latest" refers to the most recent stable version of the browser.
 
-There are two primary methods to integrate polyfills into your application:
+For the most up-to-date information on supported browsers, please refer to the official Angular documentation on [Supported Browsers](https://angular.io/guide/browser-support#supported-browsers).
 
-### Polyfill with CDN
+## Modern Web Development and Browser Support
 
-Add the ES6 Promise polyfill to your HTML file using the following CDN links:
+Syncfusion<sup style="font-size:70%">&reg;</sup> Angular UI components leverage modern web standards for optimal performance and reduced dependency on polyfills or compatibility layers.
 
-```html
-<!-- Automatically provides/replaces `Promise` if missing or broken. -->
-<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
-<!-- Minified version of `es6-promise-auto` below. -->
-<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
-```
+Key points:
 
-### Polyfill with NPM
+1. **Evergreen Browsers**: Components perform best with automatically updating browsers (Chrome, Firefox, Edge, Safari).
 
-You can also install the ES6 Promise polyfill using npm.
+2. **Angular Compatibility**: Syncfusion<sup style="font-size:70%">&reg;</sup> components align with Angular's browser support policy.
 
-To install via npm, use the following command:
+3. **Mobile Support**: Full support for the latest versions of mobile browsers on iOS and Android platforms.
 
-```bash
-yarn add es6-promise
-# or
-npm install es6-promise
-```
+## Considerations for Internet Explorer 11
 
-Incorporate it into your code as shown below:
+While IE11 is supported, developers should be aware of the following:
 
-```typescript
-var Promise = require('es6-promise').Promise;
-```
+- Some features may have limited functionality or require additional polyfills.
+- Performance may be impacted compared to modern browsers.
+- As IE11 usage continues to decline, consider the necessity of extensive IE11 support in new projects.
 
-For additional details, refer to [this link](https://github.com/stefanpenner/es6-promise).
+For detailed information on polyfills and browser support in Angular, refer to the official Angular documentation:
+- [Angular Versions and Polyfills](https://angular.dev/reference/versions#polyfills)
+  
+
+## Additional Resources
+
+- [Angular Browser Support](https://angular.io/guide/browser-support)
+- [Syncfusion Angular Documentation](https://ej2.syncfusion.com/angular/documentation/)
+- [Can I Use](https://caniuse.com/) - Check browser support for web technologies
+
+Syncfusion<sup style="font-size:70%">&reg;</sup> Angular UI components enable the creation of robust, cross-browser compatible applications that deliver excellent user experiences across a wide range of modern browsers.

ej2-angular/code-snippet/dashboard-layout/save-restore-cs1/src/app.component.ts

@@ -13,13 +13,12 @@ import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
     template: `
     <div class="control-section">
         <div class="inline" id="control">
-            <ejs-dashboardlayout id='dashboard_default' #defaultLayout [columns]='5' [cellSpacing]='cellSpacing'
-                [panels]='panels'>
+            <ejs-dashboardlayout id='dashboard_default' #defaultLayout [columns]='5' [cellSpacing]='cellSpacing' [panels]='panels' (created)="onSaveClick()">
             </ejs-dashboardlayout>
         </div>
         <div class="inline" id="properties">
-            <button ejs-button id='saveBtn' #saveBtn cssClass="e-primary" (click)='onSaveClick($event)'>Save</button>
-            <button ejs-button id='restoreBtn' #restoreBtn cssClass="e-flat e-outline" (click)='onrestoreClick($event)'>Restore</button>
+            <button ejs-button id='saveBtn' #saveBtn cssClass="e-primary" (click)='onSaveClick()'>Save</button>
+            <button ejs-button id='restoreBtn' #restoreBtn cssClass="e-flat e-outline" (click)='onrestoreClick()'>Restore</button>
         </div>
     </div>`,
     encapsulation: ViewEncapsulation.None
@@ -39,7 +38,7 @@ export class AppComponent {
     { "sizeX": 1, "sizeY": 1, "row": 2, "col": 3, content: '<div class="content">6</div>' }
     ];
 
-    onSaveClick(args: any) {
+    onSaveClick() {
         this.restoreModel = this.dashboard?.serialize();
         this.restoreModel[0].content = '<div class="content">0</div>';
         this.restoreModel[1].content = '<div class="content">1</div>';
@@ -50,7 +49,7 @@ export class AppComponent {
         this.restoreModel[6].content = '<div class="content">6</div>';
     }
 
-    onrestoreClick(args: any) {
+    onrestoreClick() {
         this.dashboard!.panels = this.restoreModel;
     }
 }

ej2-angular/frameworks-and-feature/angular-aot.md

@@ -12,23 +12,23 @@ domainurl: ##DomainURL##
 
 Tree shaking is a powerful optimization technique used in modern JavaScript and TypeScript development with tools like Webpack or Rollup. Its main goal is to remove dead or unused code from the application's bundle, resulting in smaller, more efficient, and faster-loading web applications.
 
-In this guide, we explore how tree shaking is implemented in Angular applications and how it synergizes with Syncfusion<sup style="font-size:70%">&reg;</sup> Angular components to optimize performance.
+In this guide, how tree shaking is implemented in Angular applications and how it synergizes with Syncfusion Angular components to optimize performance is explored.
 
 ## Tree Shaking in Angular  
 
 The Angular CLI, utilizing Webpack for bundling script files, has supported tree shaking since Angular CLI version 2. Tree shaking operates on the static structure of ES2015 module syntax, using `import` and `export` declarations. Any exported functions or methods that are not used in your code are considered unnecessary and removed from the output bundle. This results in improved performance, with faster load times and consequently a better user experience.
 
-N> Ahead Of Time (AOT) compilation process performs tree shaking in the Angular application, which was enabled by default starting from Angular version 9. To know more about AOT compilation, refer to this [documentation](./angular-aot).
+N> Ahead Of Time (AOT) compilation process performs tree shaking in the Angular application, which was enabled by default starting from Angular version 9.
 
 ## Using Syncfusion<sup style="font-size:70%">&reg;</sup> components with Tree Shaking 
 
 Syncfusion<sup style="font-size:70%">&reg;</sup> Angular components support Tree Shaking by default and do not require any additional changes at the application level.
 
 ## Implementing Tree Shaking in an Angular Application 
 
-Follow these steps to implement an Angular application with Syncfusion<sup style="font-size:70%">&reg;</sup> components, optimizing it through tree shaking:
+Follow these steps to implement an Angular application with Syncfusion components, optimizing it through tree shaking:
 
-1. **Create an Angular Application:** Begin with the Syncfusion<sup style="font-size:70%">&reg;</sup> Angular DataGrid component as outlined in the [Getting Started](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-standalone) guide using Angular Standalone.
+1. **Create an Angular Application:** Begin with the Syncfusion Angular DataGrid component as outlined in the [Getting Started](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-standalone) guide using Angular Standalone.
 
 2. **Configuration for Tree Shaking:** Modify the `angular.json` configuration file to enable optimization features for tree shaking.
 
@@ -55,7 +55,7 @@ Follow these steps to implement an Angular application with Syncfusion<sup style
 
 > [Explore the Angular Tree Shaking Example on GitHub](https://github.com/SyncfusionExamples/syncfusion-angular-tree-shaking)
 
-By adhering to these practices, you can significantly enhance the performance of your Angular application and deliver an improved user experience.
+By adhering to these practices, the performance of the Angular application can be significantly enhanced, delivering an improved user experience.
 
 ## Bundle size for Syncfusion<sup style="font-size:70%">&reg;</sup> Angular Grid component
 
@@ -70,8 +70,4 @@ The following table demonstrates the size of the Grid module and includes the ad
 | FilterService       | 1.68 MB  | 333.16 kB     |
 | GroupService        | 1.73 MB  | 340.22 kB     |
 
-N> Make sure you are using `GridModule` for the DataGrid component instead of `GridAllModule`. Using `GridAllModule` will increase the bundle size by including all features of DataGrid. To know about the feature modules of DataGrid, refer to this [documentation](https://ej2.syncfusion.com/angular/documentation/grid/module).
-
-## See also
-
-* [Ahead-Of-Time (AOT) compilation](./angular-aot)
+N> Make sure to use `GridModule` for the DataGrid component instead of `GridAllModule`. Using `GridAllModule` will increase the bundle size by including all features of DataGrid. To know about the feature modules of DataGrid, refer to this [documentation](https://ej2.syncfusion.com/angular/documentation/grid/module).