Skip to content

Commit 74514c6

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 07-11-2024 10:30:13 PM
1 parent 67e4cc6 commit 74514c6

File tree

275 files changed

+5452
-3124
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

275 files changed

+5452
-3124
lines changed

‎ej2-angular-toc.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
<li><a href="/ej2-angular/appearance/size-modes">Size Modes</a></li>
5252
<li><a href="/ej2-angular/appearance/icons">Icons</a></li>
5353
<li><a href="/ej2-angular/appearance/theme-studio">Theme Studio</a></li>
54-
<li><a href="/ej2-angular/appearance/material3">Material 3 Theme</a></li>
54+
<li><a href="/ej2-angular/appearance/css-variables">CSS Variables</a></li>
5555
<li>How To
5656
<ul>
5757
<li><a href="/ej2-angular/appearance/how-to/Load-offline-theme">Loading offline theme</a></li>
@@ -2672,9 +2672,9 @@
26722672
</li>
26732673
<li><a href="https://ej2.syncfusion.com/angular/documentation/api/tooltip/">API Reference</a></li>
26742674
</ul>
2675-
</li><li>
2676-
<a href="/ej2-angular/treegrid/overview">TreeGrid</a>
2675+
</li><li>TreeGrid
26772676
<ul>
2677+
<li><a href="/ej2-angular/treegrid/overview">Overview</a></li>
26782678
<li><a href="/ej2-angular/treegrid/getting-started">Getting Started</a></li>
26792679
<li><a href="/ej2-angular/treegrid/modules">Feature Modules</a></li>
26802680
<li>Data Binding
@@ -2825,7 +2825,8 @@
28252825
</li>
28262826
<li><a href="https://ej2.syncfusion.com/angular/documentation/api/treegrid/">API Reference</a></li>
28272827
</ul>
2828-
</li><li>
2828+
</li>
2829+
<li>
28292830
TreeMap
28302831
<ul>
28312832
<li><a href="/ej2-angular/treemap/getting-started">Getting Started</a></li>

‎ej2-angular/3d-chart/getting-started.md

Lines changed: 19 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ cd my-app
3535
Syncfusion packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion package from npm [link]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ).
3636

3737
Currently, Syncfusion provides two types of package structures for Angular components,
38-
1. Ivy library distribution package [format](https://angular.io/guide/angular-package-format#angular-package-format)
38+
1. Ivy library distribution package [format](https://angular.dev/tools/libraries/angular-package-format)
3939
2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.
4040

4141
### Ivy library distribution package
@@ -66,37 +66,25 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w
6666

6767
>Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.
6868
69-
## Registering 3D Chart module
69+
## Add 3D Chart component
7070

71-
Import 3D Chart module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-charts` [src/app/app.module.ts].
72-
73-
```typescript
74-
import { NgModule } from '@angular/core';
75-
import { BrowserModule } from '@angular/platform-browser';
76-
// import the ChartModule for the Chart component
77-
import { Chart3DModule } from '@syncfusion/ej2-angular-charts';
78-
import { AppComponent } from './app.component';
79-
80-
@NgModule({
81-
//declaration of ChartModule into NgModule
82-
imports: [ BrowserModule, Chart3DModule ],
83-
declarations: [ AppComponent ],
84-
bootstrap: [ AppComponent ]
85-
})
86-
export class AppModule { }
87-
```
88-
89-
* Modify the template in `app.component.ts` file to render the `ej2-angular-charts` component
71+
Modify the template in `app.component.ts` file to render the `ej2-angular-charts` component
9072
`[src/app/app.component.ts]`.
9173

9274
```javascript
9375
import { Component, ViewEncapsulation } from '@angular/core';
76+
import { Chart3DModule, Chart3DAllModule} from '@syncfusion/ej2-angular-charts'
9477

9578
@Component({
96-
selector: 'app-container',
97-
// specifies the template string for the 3D Charts component
98-
template: `<ejs-chart3d id='chart-container'></ejs-chart3d>`,
99-
encapsulation: ViewEncapsulation.None
79+
imports: [
80+
Chart3DModule,
81+
Chart3DAllModule
82+
],
83+
standalone: true,
84+
selector: 'app-root',
85+
// specifies the template string for the 3D Charts component
86+
template: `<ejs-chart3d id='chart-container'></ejs-chart3d>`,
87+
encapsulation: ViewEncapsulation.None
10088
})
10189
export class AppComponent { }
10290
```
@@ -131,7 +119,7 @@ The below example shows a basic 3D Charts.
131119

132120
## Module injection
133121

134-
3D Chart component are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the AppModule. In the current application, we are going to modify the above basic 3D Chart to visualize sales data for a particular year. For this application we are going to use column series, tooltip, data label, category axis and legend feature of the 3D Chart. Please find relevant feature service name and description as follows.
122+
3D Chart component are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the `app.component.ts`. In the current application, we are going to modify the above basic 3D Chart to visualize sales data for a particular year. For this application we are going to use column series, tooltip, data label, category axis and legend feature of the 3D Chart. Please find relevant feature service name and description as follows.
135123

136124
* `ColumnSeries3DService` - Inject this provider to use column series.
137125
* `Legend3DService` - Inject this provider to use legend feature.
@@ -142,19 +130,16 @@ The below example shows a basic 3D Charts.
142130
These modules should be injected to the provider section as follows,
143131

144132
```javascript
145-
import { NgModule } from '@angular/core';
146-
import { BrowserModule } from '@angular/platform-browser';
147-
import { AppComponent } from './app.component';
148-
import { Chart3DComponent } from '@syncfusion/ej2-angular-charts';
133+
import { Chart3DModule } from '@syncfusion/ej2-angular-charts'
149134
import { Category3DService, Legend3DService, Tooltip3DService } from '@syncfusion/ej2-angular-charts';
150135
import { DataLabel3DService } from '@syncfusion/ej2-angular-charts';
136+
import { Component } from '@angular/core';
151137

152-
@NgModule({
138+
@Component({
153139
imports: [
154-
BrowserModule,
140+
Chart3DModule
155141
],
156-
declarations: [AppComponent, Chart3DComponent],
157-
bootstrap: [AppComponent],
142+
standalone: true,
158143
providers: [ Category3DService, Legend3DService, Tooltip3DService, DataLabel3DService ]
159144
})
160145

‎ej2-angular/accordion/getting-started.md

Lines changed: 20 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ cd my-app
5050
Syncfusion packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion package from npm [link]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ).
5151

5252
Currently, Syncfusion provides two types of package structures for Angular components,
53-
1. Ivy library distribution package [format](https://angular.io/guide/angular-package-format#angular-package-format)
53+
1. Ivy library distribution package [format](https://angular.dev/tools/libraries/angular-package-format)
5454
2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.
5555

5656
### Ivy library distribution package
@@ -81,26 +81,6 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w
8181

8282
>Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.
8383
84-
## Registering Accordion Module
85-
86-
Import Accordion module into Angular application(app.module.ts) from the package **@syncfusion/ej2-angular-navigations** [src/app/app.module.ts].
87-
88-
```javascript
89-
import { NgModule } from '@angular/core';
90-
import { BrowserModule } from '@angular/platform-browser';
91-
// import the AccordionModule for the Accordion component
92-
import { AccordionModule } from '@syncfusion/ej2-angular-navigations';
93-
import { AppComponent } from './app.component';
94-
95-
@NgModule({
96-
//declaration of ej2-angular-navigations module into NgModule
97-
imports: [ BrowserModule, AccordionModule ],
98-
declarations: [ AppComponent ],
99-
bootstrap: [ AppComponent ]
100-
})
101-
export class AppModule { }
102-
```
103-
10484
## Adding CSS reference
10585

10686
The following CSS files are available in `../node_modules/@syncfusion` package folder.
@@ -120,10 +100,16 @@ Modify the template in [src/app/app.component.ts] file to render the accordion c
120100
Add the Angular Accordion by using `<ejs-accordion>` selector in **template** section of the app.component.ts file.
121101

122102
```typescript
123-
import { Component, OnInit } from '@angular/core';
103+
104+
import { AccordionModule } from '@syncfusion/ej2-angular-navigations'
105+
import { Component } from '@angular/core';
124106

125107
@Component({
126-
selector: 'app-root',
108+
imports: [
109+
AccordionModule
110+
],
111+
standalone: true,
112+
selector: 'app-root',
127113
// specifies the template string for the Accordion component
128114
template: ` <ejs-accordion>
129115
<e-accordionitems>
@@ -165,9 +151,7 @@ import { Component, OnInit } from '@angular/core';
165151
</e-accordionitems>
166152
</ejs-accordion>`
167153
})
168-
export class AppComponent {
169-
170-
}
154+
export class AppComponent { }
171155

172156
```
173157

@@ -176,10 +160,16 @@ export class AppComponent {
176160
The Accordion can be rendered by defining an array of `items`.
177161

178162
```javascript
179-
import { Component, ViewChild } from '@angular/core';
163+
164+
import { AccordionModule } from '@syncfusion/ej2-angular-navigations'
165+
import { Component } from '@angular/core';
180166

181167
@Component({
182-
selector: 'app-root',
168+
imports: [
169+
AccordionModule
170+
],
171+
standalone: true,
172+
selector: 'app-root',
183173
template: `
184174
<ejs-accordion>
185175
<e-accordionitems>
@@ -219,13 +209,11 @@ import { Component, ViewChild } from '@angular/core';
219209
</ng-template>
220210
</e-accordionitem>
221211
</e-accordionitems>
222-
</ejs-accordion>
223-
`
212+
</ejs-accordion>`
224213
})
225214

226-
export class AppComponent {
215+
export class AppComponent { }
227216

228-
}
229217
```
230218

231219
* Run the application in the browser using the following command.

‎ej2-angular/accumulation-chart/getting-started.md

Lines changed: 29 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -68,47 +68,35 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w
6868

6969
>Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.
7070
71-
## Registering AccumulationChart Module
72-
73-
Import AccumulationChart module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-charts` [src/app/app.module.ts].
74-
75-
```typescript
76-
import { NgModule } from '@angular/core';
77-
import { BrowserModule } from '@angular/platform-browser';
78-
// import the AccumulationChartModule for the AccumulationChart component
79-
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts';
80-
import { AppComponent } from './app/app.component';
81-
82-
@NgModule({
83-
//declaration of AccumulationChartModule into NgModule
84-
imports: [ BrowserModule, AccumulationChartModule ],
85-
declarations: [ AppComponent ],
86-
bootstrap: [ AppComponent ]
87-
})
88-
export class AppModule { }
89-
```
90-
91-
* Modify the template in `app.component.ts` file to render the `ej2-angular-charts` component
92-
`[src/app/app.component.ts]`.
93-
94-
```javascript
95-
import { Component, ViewEncapsulation } from '@angular/core';
96-
97-
@Component({
98-
selector: 'app-container',
99-
// specifies the template string for the Accumulation Charts component
100-
template: `<ejs-accumulationchart id="pie-container">
101-
</ejs-accumulationchart>`,
102-
encapsulation: ViewEncapsulation.None
103-
})
104-
export class AppComponent { }
105-
```
106-
107-
Now use the <code>app-container</code> in the index.html instead of default one.
108-
109-
```
110-
<app-container></app-container>
111-
```
71+
## Add AccumulationChart component
72+
73+
Modify the template in `app.component.ts` file to render the `ej2-angular-charts` component `[src/app/app.component.ts]`.
74+
75+
```javascript
76+
77+
import { AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts'
78+
import { Component, ViewEncapsulation } from '@angular/core';
79+
80+
@Component({
81+
imports: [
82+
AccumulationChartAllModule
83+
],
84+
standalone: true,
85+
selector: 'app-root',
86+
// specifies the template string for the Accumulation Charts component
87+
template: `<ejs-accumulationchart id="pie-container">
88+
</ejs-accumulationchart>`,
89+
encapsulation: ViewEncapsulation.None
90+
})
91+
export class AppComponent { }
92+
93+
```
94+
95+
Now use the <code>app-container</code> in the index.html instead of default one.
96+
97+
```
98+
<app-container></app-container>
99+
```
112100

113101
* Now run the application in the browser using the below command.
114102

‎ej2-angular/appbar/getting-started.md

Lines changed: 10 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ cd my-app
4545
Syncfusion packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion package from npm [link]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ).
4646

4747
Currently, Syncfusion provides two types of package structures for Angular components,
48-
1. Ivy library distribution package [format](https://angular.io/guide/angular-package-format#angular-package-format)
48+
1. Ivy library distribution package [format](https://angular.dev/tools/libraries/angular-package-format)
4949
2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.
5050

5151
### Ivy library distribution package
@@ -76,45 +76,31 @@ To mention the ngcc package in the `package.json` file, add the suffix `-ngcc` w
7676

7777
>Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.
7878
79-
## Adding AppBar module
80-
81-
Import AppBar module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-navigations`.
82-
83-
```javascript
84-
import { NgModule } from "@angular/core";
85-
import { BrowserModule } from "@angular/platform-browser";
86-
// Imported Syncfusion AppBar module from navigations package.
87-
import { AppBarModule } from "@syncfusion/ej2-angular-navigations";
88-
import { AppComponent } from "./app.component";
89-
90-
@NgModule({
91-
imports: [BrowserModule, AppBarModule], // Registering EJ2 AppBar Module.
92-
declarations: [AppComponent],
93-
bootstrap: [AppComponent],
94-
})
95-
export class AppModule {}
96-
```
97-
9879
## Adding Syncfusion AppBar component
9980

10081
Modify the template in `app.component.ts` file with `ejs-appbar` to render the AppBar component.
10182

10283
```javascript
84+
85+
import { AppBarModule } from '@syncfusion/ej2-angular-navigations'
10386
import { Component } from "@angular/core";
10487

10588
@Component({
106-
selector: "app-root",
107-
template: `<!-- To Render AppBar. -->
89+
imports: [ AppBarModule],
90+
standalone: true,
91+
selector: "app-root",
92+
template: `<!-- To Render AppBar. -->
10893
<div class="control-container">
10994
<ejs-appbar colorMode="Primary">
11095
<button #regularBtn ejs-button cssClass="e-inherit menu" iconCss="e-icons e-menu"></button>
11196
<span class="regular">Angular AppBar</span>
11297
<div class="e-appbar-spacer"></div>
11398
<button ejs-button cssClass="e-inherit login">FREE TRIAL</button>
11499
</ejs-appbar>
115-
</div>`,
100+
</div>`
116101
})
117-
export class AppComponent {}
102+
export class AppComponent { }
103+
118104
```
119105

120106
## Adding CSS reference

0 commit comments

Comments
 (0)