Skip to content

Commit 5b38586

Browse files
rparthi-1687rparthi-1687
authored
Merge pull request #83 from SyncfusionExamples/EJ2-940781-toastNoti
940781: Sample on How to Show Toast Notification on Download
2 parents 0f66ec9 + fc768e6 commit 5b38586

24 files changed

Lines changed: 4687 additions & 0 deletions

‎How to/Show Toast Notification on Download/.editorconfig‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
ij_typescript_use_double_quotes = false
14+
15+
[*.md]
16+
max_line_length = off
17+
trim_trailing_whitespace = false

‎How to/Show Toast Notification on Download/.gitignore‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
40+
# System files
41+
.DS_Store
42+
Thumbs.db

‎How to/Show Toast Notification on Download/README.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# MyApp
2+
3+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.15.
4+
5+
## Development server
6+
7+
To start a local development server, run:
8+
9+
```bash
10+
ng serve
11+
```
12+
13+
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
14+
15+
## Code scaffolding
16+
17+
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
18+
19+
```bash
20+
ng generate component component-name
21+
```
22+
23+
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
24+
25+
```bash
26+
ng generate --help
27+
```
28+
29+
## Building
30+
31+
To build the project run:
32+
33+
```bash
34+
ng build
35+
```
36+
37+
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
38+
39+
## Running unit tests
40+
41+
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
42+
43+
```bash
44+
ng test
45+
```
46+
47+
## Running end-to-end tests
48+
49+
For end-to-end (e2e) testing, run:
50+
51+
```bash
52+
ng e2e
53+
```
54+
55+
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
56+
57+
## Additional Resources
58+
59+
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

‎How to/Show Toast Notification on Download/angular.json‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"my-app": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:application",
15+
"options": {
16+
"outputPath": "dist/my-app",
17+
"index": "src/index.html",
18+
"browser": "src/main.ts",
19+
"polyfills": [
20+
"zone.js"
21+
],
22+
"tsConfig": "tsconfig.app.json",
23+
"assets": [
24+
{
25+
"glob": "**/*",
26+
"input": "public"
27+
}
28+
],
29+
"styles": [
30+
"src/styles.css"
31+
],
32+
"scripts": [],
33+
"server": "src/main.server.ts",
34+
"outputMode": "server",
35+
"ssr": {
36+
"entry": "src/server.ts"
37+
}
38+
},
39+
"configurations": {
40+
"production": {
41+
"budgets": [
42+
{
43+
"type": "initial",
44+
"maximumWarning": "500kB",
45+
"maximumError": "1MB"
46+
},
47+
{
48+
"type": "anyComponentStyle",
49+
"maximumWarning": "4kB",
50+
"maximumError": "8kB"
51+
}
52+
],
53+
"outputHashing": "all"
54+
},
55+
"development": {
56+
"optimization": false,
57+
"extractLicenses": false,
58+
"sourceMap": true
59+
}
60+
},
61+
"defaultConfiguration": "production"
62+
},
63+
"serve": {
64+
"builder": "@angular-devkit/build-angular:dev-server",
65+
"configurations": {
66+
"production": {
67+
"buildTarget": "my-app:build:production"
68+
},
69+
"development": {
70+
"buildTarget": "my-app:build:development"
71+
}
72+
},
73+
"defaultConfiguration": "development"
74+
},
75+
"extract-i18n": {
76+
"builder": "@angular-devkit/build-angular:extract-i18n"
77+
},
78+
"test": {
79+
"builder": "@angular-devkit/build-angular:karma",
80+
"options": {
81+
"polyfills": [
82+
"zone.js",
83+
"zone.js/testing"
84+
],
85+
"tsConfig": "tsconfig.spec.json",
86+
"assets": [
87+
{
88+
"glob": "**/*",
89+
"input": "public"
90+
}
91+
],
92+
"styles": [
93+
"src/styles.css"
94+
],
95+
"scripts": []
96+
}
97+
}
98+
}
99+
}
100+
},
101+
"cli": {
102+
"analytics": "00c678c6-17d6-4fa4-bd0b-bc333253ddde"
103+
}
104+
}

‎How to/Show Toast Notification on Download/package.json‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "my-app",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"ng": "ng",
6+
"start": "ng serve",
7+
"build": "ng build",
8+
"watch": "ng build --watch --configuration development",
9+
"test": "ng test",
10+
"serve:ssr:my-app": "node dist/my-app/server/server.mjs"
11+
},
12+
"private": true,
13+
"dependencies": {
14+
"@angular/common": "^19.2.0",
15+
"@angular/compiler": "^19.2.0",
16+
"@angular/core": "^19.2.0",
17+
"@angular/forms": "^19.2.0",
18+
"@angular/platform-browser": "^19.2.0",
19+
"@angular/platform-browser-dynamic": "^19.2.0",
20+
"@angular/platform-server": "^19.2.0",
21+
"@angular/router": "^19.2.0",
22+
"@angular/ssr": "^19.2.15",
23+
"@syncfusion/ej2-angular-pdfviewer": "*",
24+
"@syncfusion/ej2-angular-buttons":"*",
25+
"@syncfusion/ej2-angular-notifications":"*",
26+
"express": "^4.18.2",
27+
"rxjs": "~7.8.0",
28+
"tslib": "^2.3.0",
29+
"zone.js": "~0.15.0"
30+
},
31+
"devDependencies": {
32+
"@angular-devkit/build-angular": "^19.2.15",
33+
"@angular/cli": "^19.2.15",
34+
"@angular/compiler-cli": "^19.2.0",
35+
"@types/express": "^4.17.17",
36+
"@types/jasmine": "~5.1.0",
37+
"@types/node": "^18.18.0",
38+
"jasmine-core": "~5.6.0",
39+
"karma": "~6.4.0",
40+
"karma-chrome-launcher": "~3.2.0",
41+
"karma-coverage": "~2.2.0",
42+
"karma-jasmine": "~5.1.0",
43+
"karma-jasmine-html-reporter": "~2.1.0",
44+
"typescript": "~5.7.2"
45+
}
46+
}

‎How to/Show Toast Notification on Download/public/favicon.ico‎

14.7 KB
Binary file not shown.

‎How to/Show Toast Notification on Download/src/app/app.component.css‎

Whitespace-only changes.

‎How to/Show Toast Notification on Download/src/app/app.component.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<style>
2+
.control-section{
3+
margin-top: 100px;
4+
}
5+
</style>
6+
<div class="control-section">
7+
<div class="content-wrapper">
8+
<!-- Syncfusion PDF Viewer component -->
9+
<!-- Displays the PDF document with full functionality -->
10+
<ejs-pdfviewer
11+
#pdfviewer
12+
id="pdfViewer"
13+
[documentPath]="document"
14+
(downloadStart)="downloadStart($event)"
15+
(downloadEnd)="downloadEnd($event)"
16+
[resourceUrl]="resource"
17+
style="height:640px;display:block"
18+
></ejs-pdfviewer>
19+
<!-- Syncfusion Toast component -->
20+
<!-- Displays notifications for download start and end -->
21+
<ejs-toast
22+
#defaulttoast
23+
id="defaulttoast"
24+
[position]="position"
25+
(close)="onClose($event)"
26+
cssClass="e-btn e-control e-success"
27+
(beforeOpen)="onBeforeOpen()"
28+
>
29+
</ejs-toast>
30+
</div>
31+
</div>

‎How to/Show Toast Notification on Download/src/app/app.component.spec.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { TestBed } from '@angular/core/testing';
2+
import { AppComponent } from './app.component';
3+
4+
describe('AppComponent', () => {
5+
beforeEach(async () => {
6+
await TestBed.configureTestingModule({
7+
imports: [AppComponent],
8+
}).compileComponents();
9+
});
10+
11+
it('should create the app', () => {
12+
const fixture = TestBed.createComponent(AppComponent);
13+
const app = fixture.componentInstance;
14+
expect(app).toBeTruthy();
15+
});
16+
17+
it(`should have the 'my-app' title`, () => {
18+
const fixture = TestBed.createComponent(AppComponent);
19+
const app = fixture.componentInstance;
20+
expect(app.title).toEqual('my-app');
21+
});
22+
23+
it('should render title', () => {
24+
const fixture = TestBed.createComponent(AppComponent);
25+
fixture.detectChanges();
26+
const compiled = fixture.nativeElement as HTMLElement;
27+
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, my-app');
28+
});
29+
});

0 commit comments

Comments
 (0)