Skip to content

Commit 844a618

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 07-18-2024 10:30:14 PM
1 parent 08ff7be commit 844a618

Some content is hidden

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

41 files changed

+684
-44
lines changed

‎ej2-angular-toc.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -416,6 +416,11 @@
416416
<li><a href="/ej2-angular/carousel/navigators-and-indicators">Navigators and Indicators</a></li>
417417
<li><a href="/ej2-angular/carousel/animations-and-transitions">Animations and Transitions</a></li>
418418
<li><a href="/ej2-angular/carousel/accessibility">Accessibility</a></li>
419+
<li>How To
420+
<ul>
421+
<li><a href="/ej2-angular/carousel/how-to/load-images-in-webp-format.md">Load images in webp format</a></li>
422+
</ul>
423+
</li>
419424
<li><a href="https://ej2.syncfusion.com/angular/documentation/api/carousel/">API Reference</a></li>
420425
</ul>
421426
</li><li>

‎ej2-angular/carousel/how-to/load-images-in-webp-format.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
layout: post
3+
title: Load webp format image in Angular Carousel component|Syncfusion
4+
description: Learn here all about about how to load webp format image in Syncfusion Angular Carousel component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-angular
6+
control: Load images in webp format
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Load webp format image in Angular Carousel component
12+
13+
You can load the carousel image in the webp format, which aims to create smaller, better-looking images. Choosing webp as your image format can significantly improve your website's performance without sacrificing visual quality. webp images are significantly smaller in file size compared to formats like JPEG and PNG. This results in faster load times and less data usage. To achieve this, you can convert your image format to webp and pass them to Carousel items. The following sample illustrates how to load a carousel image in the webp format component.
14+
15+
{% tabs %}
16+
{% highlight ts tabtitle="app.component.ts" %}
17+
{% include code-snippet/carousel/default-webp/src/app.component.ts %}
18+
{% endhighlight %}
19+
20+
{% highlight ts tabtitle="main.ts" %}
21+
{% include code-snippet/carousel/default-webp/src/main.ts %}
22+
{% endhighlight %}
23+
{% endtabs %}
24+
25+
{% previewsample "page.domainurl/samples/carousel/default-webp" %}

‎ej2-angular/carousel/navigators-and-indicators.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ domainurl: ##DomainURL##
1212

1313
The navigators and indicators are used to transition the slides manually.
1414

15+
To customize the Angular Carousel component, you can check on this video:
16+
17+
{% youtube "https://www.youtube.com/watch?v=Q7oWiGNTUn8" %}
18+
1519
## Navigators
1620

1721
### Show or hide previous and next button

‎ej2-angular/code-snippet/carousel/default-webp/angular.json

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"syncfusion-component": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "",
10+
"sourceRoot": "src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular-devkit/build-angular:browser",
15+
"options": {
16+
"outputPath": "dist",
17+
"index": "index.html",
18+
"main": "src/main.ts",
19+
"tsConfig": "tsconfig.json",
20+
"styles": [
21+
"src/styles.css"
22+
],
23+
"assets": [
24+
{
25+
"glob": "*.css",
26+
"input": "",
27+
"output": ""
28+
}
29+
]
30+
},
31+
"configurations": {
32+
"production": {
33+
"budgets": [
34+
{
35+
"type": "initial",
36+
"maximumWarning": "500kb",
37+
"maximumError": "10mb"
38+
},
39+
{
40+
"type": "anyComponentStyle",
41+
"maximumWarning": "2kb",
42+
"maximumError": "4kb"
43+
}
44+
],
45+
"outputHashing": "all"
46+
},
47+
"development": {
48+
"buildOptimizer": false,
49+
"optimization": false,
50+
"vendorChunk": true,
51+
"extractLicenses": false,
52+
"sourceMap": true,
53+
"namedChunks": true
54+
}
55+
},
56+
"defaultConfiguration": "production"
57+
},
58+
"serve": {
59+
"builder": "@angular-devkit/build-angular:dev-server",
60+
"configurations": {
61+
"production": {
62+
"buildTarget": "syncfusion-component:build:production"
63+
},
64+
"development": {
65+
"buildTarget": "syncfusion-component:build:development"
66+
}
67+
},
68+
"defaultConfiguration": "development"
69+
}
70+
}
71+
}
72+
},
73+
"cli": {
74+
"analytics": false
75+
}
76+
}

‎ej2-angular/code-snippet/carousel/default-webp/index.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.control-container {
2+
height: 360px;
3+
margin: 0 auto;
4+
width: 600px;
5+
}
6+
7+
.img-container {
8+
height: 100%;
9+
margin: 0;
10+
}
11+
12+
.img-caption {
13+
color: #fff;
14+
font-size: 1rem;
15+
position: absolute;
16+
bottom: 3rem;
17+
width: 100%;
18+
text-align: center;
19+
}

‎ej2-angular/code-snippet/carousel/default-webp/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Essential Angular Carousel Sample</title>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="description" content="Typescript Toolbar Controls" />
8+
9+
<meta name="author" content="Syncfusion" />
10+
<link href="index.css" rel="stylesheet" />
11+
<link href="icon.css" rel="stylesheet" />
12+
</head>
13+
<body>
14+
<app-root>
15+
<div id='loader'>LOADING....</div>
16+
</app-root>
17+
</body>
18+
</html>

‎ej2-angular/code-snippet/carousel/default-webp/package.json

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "syncfusion-component",
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+
},
11+
"private": true,
12+
"dependencies": {
13+
"@angular/core": "17.1.2",
14+
"@angular/platform-browser": "17.1.2",
15+
"@angular/platform-browser-dynamic": "17.1.2",
16+
"@syncfusion/ej2-angular-buttons": "*",
17+
"@syncfusion/ej2-angular-navigations": "*",
18+
"@syncfusion/ej2-base": "*",
19+
"@syncfusion/ej2-buttons": "*",
20+
"@syncfusion/ej2-navigations": "*",
21+
"@syncfusion/ej2-angular-base": "*",
22+
"@angular/animations": "17.1.2",
23+
"@angular/common": "17.1.2",
24+
"@angular/compiler": "17.1.2",
25+
"@angular/forms": "17.1.2",
26+
"@angular/router": "17.1.2",
27+
"moment": "2.29.4",
28+
"rxjs": "7.8.0",
29+
"tslib": "2.3.0",
30+
"zone.js": "0.14.3"
31+
},
32+
"devDependencies": {
33+
"@angular-devkit/build-angular": "17.1.2",
34+
"@angular/cli": "17.1.2",
35+
"@angular/compiler-cli": "17.1.2",
36+
"@types/jasmine": "4.3.0",
37+
"jasmine-core": "4.5.0",
38+
"karma": "6.4.0",
39+
"karma-chrome-launcher": "3.1.0",
40+
"karma-coverage": "2.2.0",
41+
"karma-jasmine": "5.1.0",
42+
"karma-jasmine-html-reporter": "2.0.0",
43+
"typescript": "5.3.3"
44+
}
45+
}

‎ej2-angular/code-snippet/carousel/default-webp/src/app.component.ts

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { NgModule } from '@angular/core'
2+
import { BrowserModule } from '@angular/platform-browser'
3+
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
4+
import { CarouselModule } from '@syncfusion/ej2-angular-navigations'
5+
6+
7+
8+
import { Component } from "@angular/core";
9+
import { CarouselAnimationEffect } from "@syncfusion/ej2-angular-navigations";
10+
11+
@Component({
12+
imports: [ ButtonModule, CarouselModule],
13+
14+
15+
standalone: true,
16+
selector: "app-root",
17+
template: `<!-- To Render Carousel. -->
18+
<div class="control-container">
19+
<ejs-carousel [animationEffect]="carouselAnimation">
20+
<e-carousel-items>
21+
<e-carousel-item>
22+
<ng-template #template>
23+
<figure class="img-container">
24+
<img src="https://www.gstatic.com/webp/gallery/1.webp" alt="Majestic Valley View" style="height:100%;width:100%;" />
25+
<figcaption class="img-caption">Majestic Valley View</figcaption>
26+
</figure>
27+
</ng-template>
28+
</e-carousel-item>
29+
<e-carousel-item>
30+
<ng-template #template>
31+
<figure class="img-container">
32+
<img src="https://www.gstatic.com/webp/gallery/2.webp" alt="Thrilling Rapids Adventure" style="height:100%;width:100%;" />
33+
<figcaption class="img-caption">Thrilling Rapids Adventure</figcaption>
34+
</figure>
35+
</ng-template>
36+
</e-carousel-item>
37+
<e-carousel-item>
38+
<ng-template #template>
39+
<figure class="img-container">
40+
<img src="https://www.gstatic.com/webp/gallery/3.webp" alt="Snowy Stroll" style="height:100%;width:100%;" />
41+
<figcaption class="img-caption">Snowy Stroll</figcaption>
42+
</figure>
43+
</ng-template>
44+
</e-carousel-item>
45+
</e-carousel-items>
46+
</ejs-carousel>
47+
</div>`,
48+
})
49+
export class AppComponent {
50+
public carouselAnimation: CarouselAnimationEffect = 'Fade';
51+
}
52+
53+

‎ej2-angular/code-snippet/carousel/default-webp/src/main.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { bootstrapApplication } from '@angular/platform-browser';
2+
import { AppComponent } from './app.component';
3+
import 'zone.js';
4+
bootstrapApplication(AppComponent).catch((err) => console.error(err));

‎ej2-angular/code-snippet/carousel/default-webp/src/styles.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
3+
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
4+
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
5+
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
6+
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
7+
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';

‎ej2-angular/code-snippet/carousel/default-webp/tsconfig.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"compileOnSave": false,
3+
"compilerOptions": {
4+
"baseUrl": "./",
5+
"outDir": "./dist/out-tsc",
6+
"forceConsistentCasingInFileNames": true,
7+
"strict": true,
8+
"noImplicitOverride": true,
9+
"noPropertyAccessFromIndexSignature": true,
10+
"noImplicitReturns": true,
11+
"noFallthroughCasesInSwitch": true,
12+
"sourceMap": true,
13+
"declaration": false,
14+
"downlevelIteration": true,
15+
"experimentalDecorators": true,
16+
"moduleResolution": "node",
17+
"importHelpers": true,
18+
"target": "ES2022",
19+
"module": "ES2022",
20+
"useDefineForClassFields": false,
21+
"lib": [
22+
"ES2022",
23+
"dom"
24+
]
25+
},
26+
"angularCompilerOptions": {
27+
"enableI18nLegacyMessageIdFormat": false,
28+
"strictInjectionParameters": true,
29+
"strictInputAccessModifiers": true,
30+
"strictTemplates": true
31+
}
32+
}

‎ej2-angular/code-snippet/treegrid/excel-export-cs1/src/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
77

88

99

10-
import { Component, OnInit, ViewChild } from '@angular/core';
10+
import { Component, OnInit } from '@angular/core';
1111
import { sampleData } from './datasource';
1212
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
1313
import { ExcelExportProperties } from '@syncfusion/ej2-grids';

‎ej2-angular/code-snippet/treegrid/excel-export-cs2/src/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
77

88

99

10-
import { Component, OnInit, ViewChild } from '@angular/core';
10+
import { Component, OnInit} from '@angular/core';
1111
import { sampleData } from './datasource';
1212
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
1313
import { ExcelExportProperties, RowDataBoundEventArgs, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';

‎ej2-angular/code-snippet/treegrid/excel-export-cs3/src/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
77

88

99

10-
import { Component, OnInit, ViewChild } from '@angular/core';
10+
import { Component, OnInit} from '@angular/core';
1111
import { sampleData } from './datasource';
1212
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
1313
import { ExcelExportProperties } from '@syncfusion/ej2-grids';

‎ej2-angular/code-snippet/treegrid/excel-export-cs4/src/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
77

88

99

10-
import { Component, OnInit, ViewChild } from '@angular/core';
10+
import { Component, OnInit } from '@angular/core';
1111
import { sampleData } from './datasource';
1212
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
1313
import { ExcelExportProperties } from '@syncfusion/ej2-grids';

‎ej2-angular/code-snippet/treegrid/excel-export-cs5/src/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
77

88

99

10-
import { Component, OnInit, ViewChild } from '@angular/core';
10+
import { Component, OnInit } from '@angular/core';
1111
import { sampleData } from './datasource';
1212
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
1313
import { Column, TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

‎ej2-angular/code-snippet/treegrid/excel-export-cs6/src/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
77

88

99

10-
import { Component, OnInit, ViewChild } from '@angular/core';
10+
import { Component, OnInit } from '@angular/core';
1111
import { sampleData } from './datasource';
1212
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
1313
import { ExcelExportProperties } from '@syncfusion/ej2-grids';

‎ej2-angular/code-snippet/treegrid/excel-export-cs7/src/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
77

88

99

10-
import { Component, OnInit, ViewChild } from '@angular/core';
10+
import { Component, OnInit } from '@angular/core';
1111
import { sampleData } from './datasource';
1212
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
1313
import { ExcelExportProperties } from '@syncfusion/ej2-grids';

‎ej2-angular/code-snippet/treegrid/excel-export-cs8/src/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
77

88

99

10-
import { Component, OnInit, ViewChild } from '@angular/core';
10+
import { Component, OnInit } from '@angular/core';
1111
import { sampleData } from './datasource';
1212
import { ToolbarItems, TreeGridExcelExportProperties } from '@syncfusion/ej2-treegrid';
1313
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

‎ej2-angular/code-snippet/treegrid/excel-export-cs9/src/app.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
77

88

99

10-
import { Component, OnInit, ViewChild } from '@angular/core';
10+
import { Component, OnInit } from '@angular/core';
1111
import { sampleData } from './datasource';
1212
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
1313
import { ExcelExportProperties } from '@syncfusion/ej2-grids';

0 commit comments

Comments
 (0)