diff --git a/ej2-angular/code-snippet/breadcrumb/navigations-cs2/src/app.component.ts b/ej2-angular/code-snippet/breadcrumb/navigations-cs2/src/app.component.ts index 8d7a599c00..6407f63b8d 100644 --- a/ej2-angular/code-snippet/breadcrumb/navigations-cs2/src/app.component.ts +++ b/ej2-angular/code-snippet/breadcrumb/navigations-cs2/src/app.component.ts @@ -22,7 +22,7 @@ standalone: true, - + diff --git a/ej2-angular/code-snippet/breadcrumb/navigations-cs3/src/app.component.ts b/ej2-angular/code-snippet/breadcrumb/navigations-cs3/src/app.component.ts index 5de7c9a12a..b45d39dc2a 100644 --- a/ej2-angular/code-snippet/breadcrumb/navigations-cs3/src/app.component.ts +++ b/ej2-angular/code-snippet/breadcrumb/navigations-cs3/src/app.component.ts @@ -22,7 +22,7 @@ standalone: true, - + diff --git a/ej2-angular/code-snippet/breadcrumb/navigations-cs4/src/app.component.ts b/ej2-angular/code-snippet/breadcrumb/navigations-cs4/src/app.component.ts index 1a5706b146..2f1b644dbd 100644 --- a/ej2-angular/code-snippet/breadcrumb/navigations-cs4/src/app.component.ts +++ b/ej2-angular/code-snippet/breadcrumb/navigations-cs4/src/app.component.ts @@ -23,7 +23,7 @@ standalone: true, - + diff --git a/ej2-angular/code-snippet/pivot-grid/getting-started-cs291/src/app.component.ts b/ej2-angular/code-snippet/pivot-grid/getting-started-cs291/src/app.component.ts index 0d00ed0550..81f5d9f3b9 100644 --- a/ej2-angular/code-snippet/pivot-grid/getting-started-cs291/src/app.component.ts +++ b/ej2-angular/code-snippet/pivot-grid/getting-started-cs291/src/app.component.ts @@ -21,7 +21,7 @@ standalone: true, selector: 'app-container', providers: [FieldListService], // specifies the template string for the pivot table component - template: `
Save
Load
`, + template: `
Save
Load
`, styleUrls: ['./app.component.css'] }) @@ -33,31 +33,6 @@ export class AppComponent { public pivotGridObj?: PivotView; public width?: string; - ondataBound(args: any) { - var dataSource = JSON.parse(this.pivotGridObj!.getPersistData()).dataSourceSettings.dataSource; - var a = document.getElementById('save') as HTMLElement ; - var mime_type = 'application/octet-stream'; // text/html, image/png, et c - a.setAttribute('download', 'pivot.JSON'); - (a as any).href = 'data:'+ mime_type +';base64,'+ btoa(JSON.stringify(dataSource) || ''); - (document.getElementById('files') as HTMLElement).addEventListener('change', this.readBlob, false); - } - - readBlob(args: any) { - var files = (document.getElementById('load') as any).files; - var file = files[0]; - var start = 0; - var stop = file.size - 1; - var reader = new FileReader(); - var $this = this; - reader.onloadend = function(evt: any) { - if (evt!.target.readyState == FileReader.DONE) { - $this.pivotGridObj!.dataSourceSettings.dataSource = JSON.parse(evt.target.result); - } - }; - var blob = file.slice(start, stop + 1); - reader.readAsBinaryString(blob); - } - ngOnInit(): void { this.dataSourceSettings = { dataSource: Pivot_Data as IDataSet[], @@ -72,6 +47,37 @@ export class AppComponent { }; this.width = "100%"; } - } + + saveData(): void { + if(this.pivotGridObj) + { + const dataSource = JSON.parse(this.pivotGridObj?.getPersistData()).dataSourceSettings; + const a: HTMLAnchorElement = document.createElement('a'); + const mime_type = 'application/octet-stream'; + a.setAttribute('download', 'pivot.JSON'); + a.href = 'data:' + mime_type + ';base64,' + btoa(JSON.stringify(dataSource) || ''); + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + } + } + + // Read and load data from JSON file + readBlob(event: Event): void { + const input = event.target as HTMLInputElement; + const file = input.files?.[0]; + if (file) { + const reader = new FileReader(); + reader.onloadend = (evt: ProgressEvent) => { + if (evt.target?.readyState === FileReader.DONE) { + const result = evt.target.result as string; + this.pivotGridObj!.dataSourceSettings = JSON.parse(result); + } + }; + reader.readAsText(file); + } + input.value = ''; + } + } diff --git a/ej2-angular/range-slider/getting-started.md b/ej2-angular/range-slider/getting-started.md index 46c19318f0..bdb6e1be6b 100644 --- a/ej2-angular/range-slider/getting-started.md +++ b/ej2-angular/range-slider/getting-started.md @@ -12,6 +12,10 @@ domainurl: ##DomainURL## The Slider component is available in `@syncfusion/ej2-angular-inputs` package. Utilize this package to render the Slider Component. +To get start quickly with Angular Range slider, you can check on this video: + +{% youtube "https://www.youtube.com/watch?v=_PInU4vTumk" %} + ## Setting up angular project Angular provides the easiest way to set angular CLI projects using [`Angular CLI`](https://github.com/angular/angular-cli) tool. diff --git a/ej2-angular/rich-text-editor/getting-started.md b/ej2-angular/rich-text-editor/getting-started.md index ada3da4ff0..907d6a3830 100644 --- a/ej2-angular/rich-text-editor/getting-started.md +++ b/ej2-angular/rich-text-editor/getting-started.md @@ -53,25 +53,6 @@ npm install @syncfusion/ej2-angular-richtexteditor --save > The **--save** will instruct NPM to include the rich text editor package inside of the **dependencies** section of the **package.json**. -## Registering Rich Text Editor Module - -Import Rich Text Editor module into Angular application(app.module.ts) from the package **@syncfusion/ej2-angular-richtexteditor** [src/app/app.module.ts]. - -```typescript -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { AppComponent } from './app.component'; -// import the RichTextEditorModule for the Rich Text Editor component -import { RichTextEditorModule } from '@syncfusion/ej2-angular-richtexteditor'; - -@NgModule({ - //declaration of ej2-angular-richtexteditor module into NgModule - imports: [ BrowserModule, RichTextEditorModule ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } -``` ## Adding CSS reference The following CSS files are available in **../node_modules/@syncfusion** package folder. @@ -100,7 +81,12 @@ Modify the template in the [src/app/app.component.ts] file to render the Rich Te import { Component } from '@angular/core'; import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor'; +import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor' @Component({ + imports: [ + RichTextEditorAllModule + ], + standalone: true, selector: 'app-root', template: ` @@ -129,8 +115,6 @@ export class AppComponent { ``` - - ## Module Injection To create Rich Text Editor with additional features, inject the required modules. The following modules are used to extend Rich Text Editor's basic functionality.