Integrated latest changes at 07-24-2024 11:14:16 PM

Author: SyncfusionBuild

ej2-angular/appearance/figma.md

@@ -8,30 +8,30 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Figma UI Kits for Syncfusion Components
+# Figma UI Kits for Syncfusion Angular Components
 
-Syncfusion offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme), [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme), [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme). These kits match the themes used in Syncfusion components.
+Syncfusion offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1385969023252455137), [Fluent](https://www.figma.com/community/file/1385969120047188707), [Tailwind](https://www.figma.com/community/file/1385969065626384098), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272). These kits match the themes used in Syncfusion Angular components.
 
-The kits contain reusable design components with various possible states and variants, along with detailed figures, measurements, and icons, representing the Syncfusion components.
+The kits contain reusable design components with various possible states and variants, along with detailed figures, measurements, and icons, representing the Syncfusion Angular components.
 
 ![Material 3](./images/material3.png)
 
 ## Advantages of UI kits
 
 The Syncfusion Figma UI kit offers the following key advantages:
-- The UI kit includes detailed information about Syncfusion components, such as available control lists, their states, and variants. This facilitates a quick understanding of Syncfusion components.
+- The UI kit includes detailed information about Syncfusion Angular components, such as available control lists, their states, and variants. This facilitates a quick understanding of Syncfusion Angular components.
 - Design components are developed using the [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/), making customization straightforward and efficient.
-- Developers can seamlessly match Syncfusion components with your design requirements, ensuring alignment and accuracy.
+- Developers can seamlessly match Syncfusion Angular components with your design requirements, ensuring alignment and accuracy.
 - By using standardized components and themes, the UI kit ensures consistency in your designs, maintaining a uniform look and feel across projects.
 
 ## Downloading the UI kits
 
 Syncfusion Figma UI kits are available in the [Figma community](https://www.figma.com/@syncfusion). You can download the Syncfusion theme-specific Figma UI kits from the following links:
 
-- [Material 3](https://www.figma.com/community/file/1385969023252455137/syncfusion-ui-kit-material-3-theme)
-- [Fluent](https://www.figma.com/community/file/1385969120047188707/syncfusion-ui-kit-fluent-theme)
-- [Tailwind](https://www.figma.com/community/file/1385969065626384098/syncfusion-ui-kit-tailwind-theme)
-- [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272/syncfusion-ui-kit-bootstrap-5-theme)
+- [Material 3](https://www.figma.com/community/file/1385969023252455137)
+- [Fluent](https://www.figma.com/community/file/1385969120047188707)
+- [Tailwind](https://www.figma.com/community/file/1385969065626384098)
+- [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272)
 
 ## Structure of the UI kits
 

ej2-angular/code-snippet/dialog/getting-started-cs2/src/app.component.ts

@@ -22,7 +22,7 @@ standalone: true,
         <button class="e-control e-btn" id="targetButton" (click)="onOpenDialog($event)">Open Dialog</button>
         <ejs-dialog id='dialog' #ejDialog target="#dialog-container" [showCloseIcon]='true' content='This is a Dialog content'
           width='350px'>
-        </ejs-dialog>
+      </ejs-dialog>
       </div>`
 })
 
@@ -32,6 +32,6 @@ export class AppComponent implements OnInit {
 
   // Show the Dialog when click the button
   public onOpenDialog = (event: any): void => {
-    this.ejDialog.show();
+      this.ejDialog.show();
   };
 }

ej2-angular/code-snippet/dialog/getting-started-cs3/src/app.component.ts

@@ -33,11 +33,11 @@ export class AppComponent implements OnInit {
 
   // Show the Dialog when click the button
   public onOpenDialog = (event: any): void => {
-    this.ejDialog.show();
+      this.ejDialog.show();
   };
 
   // Hide the Dialog when click the Dialog overlay
   public onOverlayClick() {
-    this.ejDialog.hide();
+      this.ejDialog.hide();
   }
 }

ej2-angular/code-snippet/dialog/getting-started-cs4/src/app.component.ts

@@ -28,7 +28,7 @@ standalone: true,
 
 export class AppComponent implements OnInit {
   // Reference the Dialog element
-  @ViewChild('ejDialog') ejDialog: DialogComponent | any;
+  @ViewChild('ejDialog') ejDialog: DialogComponent |any;
 
   // Show the Dialog when click the button
   public onOpenDialog = (event: any): void => {

ej2-angular/code-snippet/dialog/getting-started-cs5/src/app.component.ts

@@ -23,13 +23,13 @@ standalone: true,
         <button class="e-control e-btn" id="targetButton" (click)="onOpenDialog($event)">Open Dialog</button>
         <ejs-dialog id='dialog' #ejDialog target="#dialog-container" header='Dialog' [showCloseIcon]='true' content='This is a Dialog with button and primary button'
           width='350px' [buttons]='buttons'>
-        </ejs-dialog>
+      </ejs-dialog>
       </div>`
 })
 
 export class AppComponent implements OnInit {
   // Reference the Dialog element
-  @ViewChild('ejDialog') ejDialog: DialogComponent | any;
+     @ViewChild('ejDialog') ejDialog: DialogComponent | any;
 
   // Show the Dialog when click the button
   public onOpenDialog = (event: any): void => {
@@ -41,7 +41,7 @@ export class AppComponent implements OnInit {
     {
       'click': this.hideDialog.bind(this),
       // Accessing button component properties by buttonModel property
-      buttonModel: {
+        buttonModel:{
         content: 'OK',
         // Enables the primary button
         isPrimary: true
@@ -54,9 +54,9 @@ export class AppComponent implements OnInit {
       }
     }
   ];
-  
+
   // Hide the Dialog when click the footer button.
   public hideDialog() {
     this.ejDialog.hide();
-  }
+}
 }

ej2-angular/code-snippet/dialog/position-cs1/src/app.component.ts

@@ -23,51 +23,51 @@ standalone: true,
         <button class="e-control e-btn" id="targetButton" (click)="onOpenDialog($event)">Open Dialog</button>
         <ejs-dialog id='dialog' #ejDialog target="#dialog-container" [position]='position' header='Dialog' [showCloseIcon]='true'
           content='This is a Dialog with drag enabled' width='350px'>
-          <ng-template #header>
+       <ng-template #header>
             <span>Choose a Dialog Position</span>
-          </ng-template>
-          <ng-template #content>
-            <table style="width:320px;padding:18px; padding-top:0px;">
-              <tr>
+        </ng-template>
+        <ng-template #content>
+          <table style="width:320px;padding:18px; padding-top:0px;">
+            <tr>
                 <td><input type="radio" name="xy" (click)="changePosition($event)" value="left top" checked="true">left top
                 </td>
                 <td><input type="radio" name="xy" (click)="changePosition($event)" value="center top">center top</td>
                 <td><input type="radio" name="xy" (click)="changePosition($event)" value="right top">right top</td>
               </tr>
               <tr>
-                <td><input type="radio" name="xy" (click)="changePosition($event)" value="left center">left center</td>
-                <td><input type="radio" name="xy" (click)="changePosition($event)" value="center center">center center</td>
+              <td><input type="radio" name="xy" (click)="changePosition($event)" value="left center">left center</td>
+              <td><input type="radio" name="xy" (click)="changePosition($event)" value="center center">center center</td>
                 <td><input type="radio" name="xy" (click)="changePosition($event)" value="right center">right center</td>
               </tr>
               <tr>
-                <td><input type="radio" name="xy" (click)="changePosition($event)" value="left bottom">left bottom</td>
-                <td><input type="radio" name="xy" (click)="changePosition($event)" value="center bottom">center bottom</td>
-                <td><input type="radio" name="xy" (click)="changePosition($event)" value="right bottom">right bottom</td>
+              <td><input type="radio" name="xy" (click)="changePosition($event)" value="left bottom">left bottom</td>
+              <td><input type="radio" name="xy" (click)="changePosition($event)" value="center bottom">center bottom</td>
+              <td><input type="radio" name="xy" (click)="changePosition($event)" value="right bottom">right bottom</td>
               </tr>
-            </table>
-          </ng-template>
-          <ng-template #footerTemplate>
+          </table>
+        </ng-template>
+        <ng-template #footerTemplate>
             <span id="posvalue" style="float:left; padding-left:10px;">Position: "Left", "Top"</span>
-          </ng-template>
-        </ejs-dialog>
+        </ng-template>
+      </ejs-dialog>
       </div>
         `
 })
 
 export class AppComponent implements OnInit {
   // Reference the Dialog element
-  @ViewChild('ejDialog') ejDialog: DialogComponent | any;
+    @ViewChild('ejDialog') ejDialog: DialogComponent |any;
 
-  // Set Dialog position
-  public position: object = { X: 'left', Y: 'top' };
+    // Set Dialog position
+    public position: object={ X: 'left', Y: 'top' };
 
   // Show the Dialog when click the button
-  public onOpenDialog = (event: any): void => {
-    this.ejDialog.show();
+    public onOpenDialog = (event: any): void => {
+        this.ejDialog.show();
   };
 
-  public changePosition = (event: any): void => {
-    this.ejDialog.position = { X: event.currentTarget.value.split(" ")[0], Y: event.currentTarget.value.split(" ")[1] };
-    document.getElementById("posvalue")!.innerHTML = 'Position: {X: "' + event.currentTarget.value.split(" ")[0] + '", Y: "' + event.currentTarget.value.split(" ")[1] + '"}';
-  }
+    public changePosition = (event: any): void =>{
+      this.ejDialog.position = { X: event.currentTarget.value.split(" ")[0], Y: event.currentTarget.value.split(" ")[1] };
+      document.getElementById("posvalue")!.innerHTML = 'Position: {X: "' + event.currentTarget.value.split(" ")[0] + '", Y: "' + event.currentTarget.value.split(" ")[1] + '"}';
+    }
 }

ej2-angular/document-editor/comments.md

@@ -17,7 +17,28 @@ Document Editor allows you to add comments to documents. You can add, navigate a
 Comments can be inserted to the selected text.
 
 ```typescript
-this.documentEditor.editor.insertComment("Test comment");
+this.documentEditor.editor.insertComment('Test comment');
+```
+
+## Add a New Comment with Date, Author, and Status
+
+Comments can be inserted into the selected text with a specified date, author, and status.
+
+```typescript
+// In this example, a comment with the text "Nancy Davolio" is added by the author Rachel Green on July 23, 2024, at 2:30 PM. The isResolved status is set to false.
+
+// Create a specific date: July 23, 2024, at 2:30:00 PM.
+let specificDate = new Date(2024, 6, 23, 14, 30, 0); // Note: July is represented by 6 (0-based index).
+
+// Define the properties of the comment including author, date, and resolution status.
+let commentProperties: CommentProperties = { 
+    author: 'Nancy Davolio',          // The author of the comment.
+    dateTime: specificDate,           // The date and time when the comment is created.
+    isResolved: false                 // The status of the comment; false indicates it is unresolved.
+};
+
+// Insert the comment with the specified properties into the document editor.
+this.documentEditor.editor.insertComment('Hello world', commentProperties);
 ```
 
 ## Comment navigation
@@ -108,29 +129,9 @@ import { ToolbarService , DocumentEditorSettingsModel } from '@syncfusion/ej2-an
 })
 export class AppComponent implements OnInit {
     public mentionData: any = [
-        { "Name": "Selma Rose", "Eimg": "3", "EmailId": "selma@mycompany.com" },
-        { "Name": "Russo Kay", "Eimg": "8", "EmailId": "russo@mycompany.com" },
-        { "Name": "Camden Kate", "Eimg": "9", "EmailId": "camden@mycompany.com" },
-        { "Name": "Mary Kate", "Eimg": "4", "EmailId": "marry@mycompany.com" },
-        { "Name": "Ursula Ann", "Eimg": "2", "EmailId": "ursula@mycompany.com" },
-        { "Name": "Margaret", "Eimg": "5", "EmailId": "margaret@mycompany.com" },
-        { "Name": "Laura Grace", "Eimg": "6", "EmailId": "laura@mycompany.com" },
-        { "Name": "Robert", "Eimg": "8", "EmailId": "robert@mycompany.com" },
-        { "Name": "Albert", "Eimg": "9", "EmailId": "albert@mycompany.com" },
-        { "Name": "Michale", "Eimg": "10", "EmailId": "michale@mycompany.com" },
-        { "Name": "Andrew James", "Eimg": "7", "EmailId": "james@mycompany.com" },
-        { "Name": "Rosalie", "Eimg": "4", "EmailId": "rosalie@mycompany.com" },
-        { "Name": "Stella Ruth", "Eimg": "2", "EmailId": "stella@mycompany.com" },
-        { "Name": "Richard Rose", "Eimg": "10", "EmailId": "richard@mycompany.com" },
-        { "Name": "Gabrielle", "Eimg": "3", "EmailId": "gabrielle@mycompany.com" },
-        { "Name": "Thomas", "Eimg": "7", "EmailId": "thomas@mycompany.com" },
-        { "Name": "Charles Danny", "Eimg": "8", "EmailId": "charles@mycompany.com" },
-        { "Name": "Daniel", "Eimg": "10", "EmailId": "daniel@mycompany.com" },
-        { "Name": "Matthew", "Eimg": "7", "EmailId": "matthew@mycompany.com" },
-        { "Name": "Donald Krish", "Eimg": "9", "EmailId": "donald@mycompany.com" },
-        { "Name": "Yohana", "Eimg": "1", "EmailId": "yohana@mycompany.com" },
-        { "Name": "Kevin Paul", "Eimg": "10", "EmailId": "kevin@mycompany.com" },
-        { "Name": "Andrew Fuller", "Eimg": "3", "EmailId": "andrew@mycompany.com"}
+        { "Name": "Mary Kate", "EmailId": "marry@company.com" },
+        { "Name": "Andrew James", "EmailId": "james@company.com" },
+        { "Name": "Andrew Fuller", "EmailId": "andrew@company.com"}
     ];
     public settings: DocumentEditorSettingsModel = { mentionSettings : { dataSource: this.mentionData, fields: { text: 'Name' }}  };
     ngOnInit(): void {

ej2-angular/gantt/getting-started.md

@@ -42,26 +42,6 @@ ng add @syncfusion/ej2-angular-gantt --save
 
 > The **--save** will instruct NPM to include the gantt package inside of the `dependencies` section of the `package.json`.
 
-## Registering Gantt Module
-
-Import Gantt module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-gantt` [src/app/app.module.ts].
-
-```typescript
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-// import the GanttModule for the Gantt component
-import { GanttModule } from '@syncfusion/ej2-angular-gantt';
-import { AppComponent }  from './app.component';
-
-@NgModule({
-  //declaration of ej2-angular-gantt module into NgModule
-  imports:      [ BrowserModule, GanttModule ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
-})
-export class AppModule { }
-```
-
 ## Adding CSS reference
 
 The following CSS files are available in `../node_modules/@syncfusion` package folder.
@@ -90,11 +70,16 @@ Add the Angular Gantt by using `<ejs-gantt>` selector in `template` section of t
 
 ```typescript
 import { Component, OnInit } from '@angular/core';
+import { GanttModule } from '@syncfusion/ej2-angular-gantt'
 
 @Component({
-  selector: 'app-root',
-  // specifies the template string for the Gantt component
-  template: `<ejs-gantt> </ejs-gantt>`
+    imports: [
+        GanttModule
+    ],
+    standalone: true,
+    selector: 'app-root',
+    // specifies the template string for the Gantt component
+    template: `<ejs-gantt> </ejs-gantt>`
 })
 export class AppComponent implements OnInit {
 
@@ -110,17 +95,26 @@ Bind data for the Gantt component by using [`dataSource`](https://ej2.syncfusion
 It accepts either array of JavaScript object or `DataManager` instance.
 
 ```typescript
-import { Component, OnInit } from '@angular/core';
+import { GanttModule } from '@syncfusion/ej2-angular-gantt'
+import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
+imports: [
+         GanttModule
+    ],
+
+standalone: true,
     selector: 'app-root',
-    template: `<ejs-gantt [dataSource]='data'> </ejs-gantt>`
+    template:
+       `<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" ></ejs-gantt>`,
+    encapsulation: ViewEncapsulation.None
 })
-export class AppComponent implements OnInit {
-
-    public data: Object[];
+export class AppComponent{
+    // Data for Gantt
+    public data?: object[];
+    public taskSettings?: object;
 
-    ngOnInit(): void {
+    public ngOnInit(): void {
         this.data = [
             {
                 TaskID: 1,
@@ -145,14 +139,24 @@ export class AppComponent implements OnInit {
                 ]
             },
         ];
+        this.taskSettings = {
+            id: 'TaskID',
+            name: 'TaskName',
+            startDate: 'StartDate',
+            endDate: 'EndDate',
+            duration: 'Duration',
+            progress: 'Progress',
+            dependency: 'Predecessor',
+            child: 'subtasks'
+        };
     }
 }
 
 ```
 
 ## Module injection
 
-The Gantt component was segregated into individual feature-wise modules. To use its feature, you need to inject its feature service in the AppModule.
+The Gantt component was segregated into individual feature-wise modules. To use its feature, you need to inject its feature service in the `app.component.ts`.
 Find the relevant feature modules and descriptions as follows:
 
 * [`Edit`](https://ej2.syncfusion.com/angular/documentation/api/gantt/#editmodule) : Inject this module to use the editing feature.
@@ -162,21 +166,19 @@ Find the relevant feature modules and descriptions as follows:
 * [`Toolbar`](https://ej2.syncfusion.com/angular/documentation/api/gantt/#toolbar) : Inject this module to use the toolbar items.
 * [`DayMarkers`](https://ej2.syncfusion.com/angular/documentation/api/gantt/#daymarkersmodule) : Inject this module to highlight the days.
 
-Now, import the above-mentioned modules from the Gantt package and inject them into `provider` section of `AppModule` like following code:
+Now, import the above-mentioned modules from the Gantt package and inject them into `provider` section of `app.component.ts` like following code:
 
  ```javascript
-    import { NgModule } from '@angular/core';
-    import { BrowserModule } from '@angular/platform-browser';
-    import { AppComponent } from './app.component';
-    import { GanttComponent, EditService , FilterService, SortService, SelectionService, ToolbarService,DayMarkersService } from '@syncfusion/ej2-angular-gantt';
+    import { GanttModule } from '@syncfusion/ej2-angular-gantt';
+    import { Component } from '@angular/core';
+    import { EditService , FilterService, SortService, SelectionService, ToolbarService, DayMarkersService } from '@syncfusion/ej2-angular-gantt';
 
-    @NgModule({
+    @Component({
         imports: [
-            BrowserModule,
+            GanttModule
         ],
-        declarations: [AppComponent, GanttComponent],
-        bootstrap: [AppComponent],
-        providers: [ EditService , FilterService, SortService, SelectionService,ToolbarService,DayMarkersService ]
+        standalone: true,
+        providers: [ EditService , FilterService, SortService, SelectionService, ToolbarService, DayMarkersService ]
     })
 
  ```