DOCINFRA-2341_merged_using_automation

ej2-angular-toc.html

@@ -416,6 +416,11 @@
      <li><a href="/ej2-angular/carousel/navigators-and-indicators">Navigators and Indicators</a></li>
      <li><a href="/ej2-angular/carousel/animations-and-transitions">Animations and Transitions</a></li>
      <li><a href="/ej2-angular/carousel/accessibility">Accessibility</a></li>
+     <li>How To
+        <ul>
+        <li><a href="/ej2-angular/carousel/how-to/load-images-in-webp-format.md">Load images in webp format</a></li>
+       </ul>
+      </li>
      <li><a href="https://ej2.syncfusion.com/angular/documentation/api/carousel/">API Reference</a></li>
     </ul>
 </li><li>

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

@@ -0,0 +1,25 @@
+---
+layout: post
+title: Load webp format image in Angular Carousel component|Syncfusion
+description: Learn here all about about how to load webp format image in Syncfusion Angular Carousel component of Syncfusion Essential JS 2 and more.
+platform: ej2-angular
+control: Load images in webp format  
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Load webp format image in Angular Carousel component
+
+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.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/carousel/default-webp/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/carousel/default-webp/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/samples/carousel/default-webp" %}

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

@@ -12,6 +12,10 @@ domainurl: ##DomainURL##
 
 The navigators and indicators are used to transition the slides manually.
 
+To customize the Angular Carousel component, you can check on this video:
+
+{% youtube "https://www.youtube.com/watch?v=Q7oWiGNTUn8" %}
+
 ## Navigators
 
 ### Show or hide previous and next button

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

@@ -0,0 +1,76 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "syncfusion-component": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "index.html",
+            "main": "src/main.ts",
+            "tsConfig": "tsconfig.json",
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              {
+                "glob": "*.css",
+                "input": "",
+                "output": ""
+              }
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "10mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "syncfusion-component:build:production"
+            },
+            "development": {
+              "buildTarget": "syncfusion-component:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

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

@@ -0,0 +1,19 @@
+.control-container {
+  height: 360px;
+  margin: 0 auto;
+  width: 600px;
+}
+
+.img-container {
+  height: 100%;
+  margin: 0;
+}
+
+.img-caption {
+  color: #fff;
+  font-size: 1rem;
+  position: absolute;
+  bottom: 3rem;
+  width: 100%;
+  text-align: center;
+}

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

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Essential Angular Carousel Sample</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Typescript Toolbar Controls" />
+
+<meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet" />
+    <link href="icon.css" rel="stylesheet" />
+</head>
+<body>
+    <app-root>
+        <div id='loader'>LOADING....</div>
+    </app-root>
+</body>
+</html>

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

@@ -0,0 +1,45 @@
+{
+  "name": "syncfusion-component",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/core": "17.1.2",
+    "@angular/platform-browser": "17.1.2",
+    "@angular/platform-browser-dynamic": "17.1.2",
+    "@syncfusion/ej2-angular-buttons": "*",
+    "@syncfusion/ej2-angular-navigations": "*",
+    "@syncfusion/ej2-base": "*",
+    "@syncfusion/ej2-buttons": "*",
+    "@syncfusion/ej2-navigations": "*",
+    "@syncfusion/ej2-angular-base": "*",
+    "@angular/animations": "17.1.2",
+    "@angular/common": "17.1.2",
+    "@angular/compiler": "17.1.2",
+    "@angular/forms": "17.1.2",
+    "@angular/router": "17.1.2",
+    "moment": "2.29.4",
+    "rxjs": "7.8.0",
+    "tslib": "2.3.0",
+    "zone.js": "0.14.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "17.1.2",
+    "@angular/cli": "17.1.2",
+    "@angular/compiler-cli": "17.1.2",
+    "@types/jasmine": "4.3.0",
+    "jasmine-core": "4.5.0",
+    "karma": "6.4.0",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-coverage": "2.2.0",
+    "karma-jasmine": "5.1.0",
+    "karma-jasmine-html-reporter": "2.0.0",
+    "typescript": "5.3.3"
+  }
+}

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

@@ -0,0 +1,53 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
+import { CarouselModule } from '@syncfusion/ej2-angular-navigations'
+
+
+
+import { Component } from "@angular/core";
+import { CarouselAnimationEffect } from "@syncfusion/ej2-angular-navigations";
+
+@Component({
+imports: [ ButtonModule, CarouselModule],
+
+
+standalone: true,
+  selector: "app-root",
+  template: `<!-- To Render Carousel. -->
+    <div class="control-container">
+      <ejs-carousel [animationEffect]="carouselAnimation">
+        <e-carousel-items>
+          <e-carousel-item>
+            <ng-template #template>
+              <figure class="img-container">
+                <img src="https://www.gstatic.com/webp/gallery/1.webp" alt="Majestic Valley View" style="height:100%;width:100%;" />
+                <figcaption class="img-caption">Majestic Valley View</figcaption>
+              </figure>
+            </ng-template>
+          </e-carousel-item>
+          <e-carousel-item>
+            <ng-template #template>
+              <figure class="img-container">
+                <img src="https://www.gstatic.com/webp/gallery/2.webp" alt="Thrilling Rapids Adventure" style="height:100%;width:100%;" />
+                <figcaption class="img-caption">Thrilling Rapids Adventure</figcaption>
+              </figure>
+            </ng-template>
+          </e-carousel-item>
+          <e-carousel-item>
+            <ng-template #template>
+              <figure class="img-container">
+                <img src="https://www.gstatic.com/webp/gallery/3.webp" alt="Snowy Stroll" style="height:100%;width:100%;" />
+                <figcaption class="img-caption">Snowy Stroll</figcaption>
+              </figure>
+            </ng-template>
+          </e-carousel-item>
+        </e-carousel-items>
+      </ejs-carousel>
+    </div>`,
+})
+export class AppComponent {
+  public carouselAnimation: CarouselAnimationEffect = 'Fade';
+}
+
+

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

@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import 'zone.js';
+bootstrapApplication(AppComponent).catch((err) => console.error(err));

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

@@ -0,0 +1,7 @@
+
+@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';

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

@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

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

@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
 
 
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { sampleData } from './datasource';
 import { ToolbarItems } from '@syncfusion/ej2-treegrid';
 import { ExcelExportProperties } from '@syncfusion/ej2-grids';

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

@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
 
 
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit} from '@angular/core';
 import { sampleData } from './datasource';
 import { ToolbarItems } from '@syncfusion/ej2-treegrid';
 import { ExcelExportProperties, RowDataBoundEventArgs, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';

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

@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
 
 
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit} from '@angular/core';
 import { sampleData } from './datasource';
 import { ToolbarItems } from '@syncfusion/ej2-treegrid';
 import { ExcelExportProperties } from '@syncfusion/ej2-grids';

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

@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
 
 
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { sampleData } from './datasource';
 import { ToolbarItems } from '@syncfusion/ej2-treegrid';
 import { ExcelExportProperties } from '@syncfusion/ej2-grids';

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

@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
 
 
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { sampleData } from './datasource';
 import { ToolbarItems } from '@syncfusion/ej2-treegrid';
 import { Column, TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

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

@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
 
 
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { sampleData } from './datasource';
 import { ToolbarItems } from '@syncfusion/ej2-treegrid';
 import { ExcelExportProperties } from '@syncfusion/ej2-grids';

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

@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
 
 
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { sampleData } from './datasource';
 import { ToolbarItems } from '@syncfusion/ej2-treegrid';
 import { ExcelExportProperties } from '@syncfusion/ej2-grids';

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

@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
 
 
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { sampleData } from './datasource';
 import { ToolbarItems, TreeGridExcelExportProperties } from '@syncfusion/ej2-treegrid';
 import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

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

@@ -7,7 +7,7 @@ import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
 
 
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { sampleData } from './datasource';
 import { ToolbarItems } from '@syncfusion/ej2-treegrid';
 import { ExcelExportProperties } from '@syncfusion/ej2-grids';