DOCINFRA-2341_merged_using_automation

ej2-angular-toc.html

@@ -3088,7 +3088,7 @@
     </ul>
  </li> <li>Release Notes
                 <ul>
-				<li>2024 Volume 3 - 27.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/27.2.3">27.2.3</a></li><li><a href="/ej2-angular/release-notes/27.1.58">27.1.58</a></li><li><a href="/ej2-angular/release-notes/27.1.57">27.1.57</a></li><li><a href="/ej2-angular/release-notes/27.1.56">27.1.56</a></li><li><a href="/ej2-angular/release-notes/27.1.55">27.1.55</a></li><li><a href="/ej2-angular/release-notes/27.1.53">27.1.53</a></li><li><a href="/ej2-angular/release-notes/27.1.52">27.1.52</a></li><li><a href="/ej2-angular/release-notes/27.1.51">27.1.51</a></li><li><a href="/ej2-angular/release-notes/27.1.50">27.1.50</a></li></ul></li><li><a href="/ej2-angular/release-notes/27.2.2">27.2.2 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/27.1.48">27.1.48 Main Release</a></li></ul></li><li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/26.2.14">26.2.14</a></li><li><a href="/ej2-angular/release-notes/26.2.13">26.2.13</a></li><li><a href="/ej2-angular/release-notes/26.2.12">26.2.12</a></li><li><a href="/ej2-angular/release-notes/26.2.11">26.2.11</a></li><li><a href="/ej2-angular/release-notes/26.2.10">26.2.10</a></li><li><a href="/ej2-angular/release-notes/26.2.9">26.2.9</a></li><li><a href="/ej2-angular/release-notes/26.2.8">26.2.8</a></li><li><a href="/ej2-angular/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-angular/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-angular/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-angular/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-angular/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-angular/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-angular/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-angular/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-angular/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-angular/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-angular/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-angular/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-angular/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-angular/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-angular/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-angular/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-angular/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-angular/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
+				<li>2024 Volume 3 - 27.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/27.2.4">27.2.4</a></li><li><a href="/ej2-angular/release-notes/27.2.3">27.2.3</a></li><li><a href="/ej2-angular/release-notes/27.1.58">27.1.58</a></li><li><a href="/ej2-angular/release-notes/27.1.57">27.1.57</a></li><li><a href="/ej2-angular/release-notes/27.1.56">27.1.56</a></li><li><a href="/ej2-angular/release-notes/27.1.55">27.1.55</a></li><li><a href="/ej2-angular/release-notes/27.1.53">27.1.53</a></li><li><a href="/ej2-angular/release-notes/27.1.52">27.1.52</a></li><li><a href="/ej2-angular/release-notes/27.1.51">27.1.51</a></li><li><a href="/ej2-angular/release-notes/27.1.50">27.1.50</a></li></ul></li><li><a href="/ej2-angular/release-notes/27.2.2">27.2.2 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/27.1.48">27.1.48 Main Release</a></li></ul></li><li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/26.2.14">26.2.14</a></li><li><a href="/ej2-angular/release-notes/26.2.13">26.2.13</a></li><li><a href="/ej2-angular/release-notes/26.2.12">26.2.12</a></li><li><a href="/ej2-angular/release-notes/26.2.11">26.2.11</a></li><li><a href="/ej2-angular/release-notes/26.2.10">26.2.10</a></li><li><a href="/ej2-angular/release-notes/26.2.9">26.2.9</a></li><li><a href="/ej2-angular/release-notes/26.2.8">26.2.8</a></li><li><a href="/ej2-angular/release-notes/26.2.7">26.2.7</a></li><li><a href="/ej2-angular/release-notes/26.2.5">26.2.5</a></li><li><a href="/ej2-angular/release-notes/26.1.42">26.1.42</a></li><li><a href="/ej2-angular/release-notes/26.1.41">26.1.41</a></li><li><a href="/ej2-angular/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-angular/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-angular/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-angular/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-angular/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-angular/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-angular/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-angular/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-angular/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-angular/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-angular/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-angular/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-angular/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-angular/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-angular/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
 				<li>2023 Volume 4 - 24.*<ul><li>Weekly Release<ul><li><a href="/ej2-angular/release-notes/24.2.9">24.2.9</a></li><li><a href="/ej2-angular/release-notes/24.2.8">24.2.8</a></li><li><a href="/ej2-angular/release-notes/24.2.7">24.2.7</a></li><li><a href="/ej2-angular/release-notes/24.2.6">24.2.6</a></li><li><a href="/ej2-angular/release-notes/24.2.5">24.2.5</a></li><li><a href="/ej2-angular/release-notes/24.2.4">24.2.4</a></li><li><a href="/ej2-angular/release-notes/24.1.47">24.1.47</a></li><li><a href="/ej2-angular/release-notes/24.1.46">24.1.46</a></li><li><a href="/ej2-angular/release-notes/24.1.45">24.1.45</a></li><li><a href="/ej2-angular/release-notes/24.1.44">24.1.44</a></li><li><a href="/ej2-angular/release-notes/24.1.43">24.1.43</a></li></ul></li>				<li><a href="/ej2-angular/release-notes/24.2.3">24.2.3 Service Pack Release</a></li>
 				<li><a href="/ej2-angular/release-notes/24.1.41">24.1.41 Main Release</a></li></ul></li>
 				<li>2023 Volume 3 - 23.*<ul><li> Weekly Release<ul><li><a href="/ej2-angular/release-notes/23.2.7">23.2.7</a></li><li><a href="/ej2-angular/release-notes/23.2.6">23.2.6</a></li><li><a href="/ej2-angular/release-notes/23.2.5">23.2.5</a></li><li><a href="/ej2-angular/release-notes/23.1.44">23.1.44</a></li><li><a href="/ej2-angular/release-notes/23.1.43">23.1.43</a></li><li><a href="/ej2-angular/release-notes/23.1.42">23.1.42</a></li><li><a href="/ej2-angular/release-notes/23.1.41">23.1.41</a></li><li><a href="/ej2-angular/release-notes/23.1.40">23.1.40</a></li><li><a href="/ej2-angular/release-notes/23.1.39">23.1.39</a></li><li><a href="/ej2-angular/release-notes/23.1.38">23.1.38</a></li></ul></li>

ej2-angular/Release-notes/27.2.4.md

@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Angular Weekly Release Release Notes  
+description: Essential Studio for Angular Weekly Release Release Notes  
+platform: ej2-angular
+documentation: ug
+---
+
+# Essential Studio for Angular  Release Notes  
+
+{% include release-info.html date="November 26, 2024"  version="v27.2.4" %}
+
+{% directory path: _includes/release-notes/v27.2.4 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}

ej2-angular/code-snippet/common/animation-multiple-cs1/src/app.component.ts

@@ -13,7 +13,8 @@ standalone: true,
   template: `
     <div #element1 class='animation1'></div>
     <div #element2 class='animation2'></div>
-    `
+    `,
+ styleUrls: ['../index.css']
 })
 
 export class AppComponent {

ej2-angular/code-snippet/common/animation-multiple-cs2/src/app.component.ts

@@ -14,7 +14,8 @@ standalone: true,
   template: `
     <div #element1 class='animation1'></div>
     <div #element2 class='animation2'></div>
-    `
+    `,
+  styleUrls: ['../index.css']  
 })
 
 export class AppComponent {

ej2-angular/code-snippet/common/animation-multiple-cs3/src/app.component.ts

@@ -13,7 +13,8 @@ standalone: true,
   template: `
     <div #element1 class='animation1'></div>
     <div #element2 class='animation2'></div>
-    `
+    `,
+  styleUrls: ['../index.css']
 })
 
 export class AppComponent {

ej2-angular/code-snippet/common/enable-sanitizer-cs1/package.json

@@ -14,6 +14,8 @@
     "@angular/platform-browser": "17.1.2",
     "@angular/platform-browser-dynamic": "17.1.2",
     "@syncfusion/ej2-base": "*",
+    "@syncfusion/ej2-angular-popups": "*",
+    "@syncfusion/ej2-angular-buttons": "*",
     "@angular/animations": "17.1.2",
     "@angular/common": "17.1.2",
     "@angular/compiler": "17.1.2",

ej2-angular/code-snippet/common/locale-cs1/package.json

@@ -14,6 +14,7 @@
     "@angular/platform-browser": "17.1.2",
     "@angular/platform-browser-dynamic": "17.1.2",
     "@syncfusion/ej2-angular-grids": "*",
+    "@syncfusion/ej2-grids": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@syncfusion/ej2-angular-lists": "*",
     "@syncfusion/ej2-angular-buttons": "*",

ej2-angular/code-snippet/common/locale-cs1/src/app.component.ts

@@ -40,7 +40,7 @@ imports: [
         GridModule
     ],
 
-providers: [GroupService, PageService]
+providers: [GroupService, PageService],
 standalone: true,
     selector: 'app-root',
     template: `<ejs-grid [dataSource]='data' [locale]='"de-DE"' [allowGrouping]='true' [allowPaging]='true' [pageSettings]='pageOptions' height='220px'>

ej2-angular/code-snippet/common/quickstart1-cs1/package.json

@@ -14,6 +14,7 @@
     "@angular/platform-browser": "17.1.2",
     "@angular/platform-browser-dynamic": "17.1.2",
     "@syncfusion/ej2-angular-grids": "*",
+    "@syncfusion/ej2-grids": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@syncfusion/ej2-angular-lists": "*",
     "@syncfusion/ej2-angular-buttons": "*",

ej2-angular/code-snippet/common/quickstart1-cs1/src/app.component.ts

@@ -17,7 +17,7 @@ imports: [
 providers: [PageService,
                 SortService,
                 FilterService,
-                GroupService]
+                GroupService],
 standalone: true,
     selector: 'app-root',
     template: `<ejs-grid [dataSource]='data' [allowPaging]="true" [allowSorting]="true"

ej2-angular/code-snippet/common/state-persistence-cs1/package.json

@@ -14,6 +14,7 @@
     "@angular/platform-browser": "17.1.2",
     "@angular/platform-browser-dynamic": "17.1.2",
     "@syncfusion/ej2-angular-grids": "*",
+    "@syncfusion/ej2-grids": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@syncfusion/ej2-angular-lists": "*",
     "@syncfusion/ej2-angular-buttons": "*",

ej2-angular/code-snippet/common/state-persistence-cs1/src/app.component.ts

@@ -16,7 +16,7 @@ imports: [
 providers: [PageService,
         SortService,
         FilterService,
-        GroupService]
+        GroupService],
 standalone: true,
     selector: 'app-root',
     template: `<ejs-grid [dataSource]='data' [enablePersistence]='true' [allowPaging]="true" [pageSettings]='pageSettings'>

ej2-angular/code-snippet/listview/avatar-template-cs1/package.json

@@ -17,6 +17,7 @@
     "@syncfusion/ej2-base": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@syncfusion/ej2-angular-buttons": "*",
+    "@syncfusion/ej2-angular-layouts": "*",
     "@angular/animations": "17.1.2",
     "@angular/common": "17.1.2",
     "@angular/compiler": "17.1.2",

ej2-angular/code-snippet/listview/avatar-template-cs1/src/app.component.ts

@@ -6,11 +6,12 @@ import { ListViewModule } from '@syncfusion/ej2-angular-lists'
 
 
 import { Component } from '@angular/core';
+import { CommonModule, NgIf } from '@angular/common';
 
 @Component({
 imports: [
 
-        ListViewModule
+        ListViewModule, CommonModule, NgIf
     ],
 
 

ej2-angular/code-snippet/listview/avatar-template-cs1/src/styles.css

@@ -1,5 +1,6 @@
 
 @import 'node_modules/@syncfusion/ej2-base/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
-@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css';
-@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-layouts/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css';

ej2-angular/code-snippet/listview/virtualization/template-cs1/index.css

@@ -1,100 +0,0 @@
-#container {
-    visibility: hidden;
-}
-
-#loader {
-  color: #008cff;
-  height: 40px;
-  width: 30%;
-  position: absolute;
-  top: 45%;
-  left: 45%;
-}
-
-#ui-list {
-  display: block;
-  max-width: 400px;
-  margin: auto;
-  border: 1px solid #dddddd;
-  border-radius: 3px;
-  cursor: pointer;
-}
-
-button {
-  float: right
-}
-
-#icon {
-  width: 45px;
-  height: 45px;
-  text-align: center;
-  line-height: 45px;
-  border-radius: 50%;
-  font-size: 20px;
-  font-weight: 500;
-  float: left;
-  margin-top: 17px;
-  margin-right: 35px;
-}
-
-img {
-  border-radius: 50%;
-  border: #ddd;
-  border: 1px solid rgba(40, 40, 40, 0.12);
-}
-
-.R {
-  background: purple;
-}
-
-.M {
-  background: pink;
-}
-
-.A {
-  background: green;
-}
-
-.S {
-  background: lightskyblue;
-}
-
-.J {
-  background: orange;
-}
-
-.N {
-  background: blue;
-}
-
-#ui-list .e-list-item {
-  height: 80px;
-  border: #ddd;
-  border: 1px solid rgba(184, 184, 184, 0.12);
-}
-
-.list-container {
-  width: inherit;
-  height: 100%;
-
-}
-
-.showUI {
-  display: inline;
-}
-
-.hideUI {
-  display: none;
-}
-
-.content {
-  height: 100%;
-  float: left;
-}
-
-.name {
-  height: 100%;
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 78px;
-}

ej2-angular/code-snippet/listview/virtualization/template-cs1/package.json

@@ -15,6 +15,7 @@
     "@angular/platform-browser-dynamic": "17.1.2",
     "@syncfusion/ej2-angular-lists": "*",
     "@syncfusion/ej2-base": "*",
+    "@syncfusion/ej2-angular-layouts": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@syncfusion/ej2-angular-buttons": "*",
     "@syncfusion/ej2-angular-popups": "*",

ej2-angular/code-snippet/listview/virtualization/template-cs1/src/app.component.ts

@@ -1,59 +1,93 @@
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { ListViewModule, VirtualizationService } from '@syncfusion/ej2-angular-lists'
-
-
-
-
+import { NgIf } from '@angular/common';
 import { Component } from '@angular/core';
 
 @Component({
 imports: [
 
-        ListViewModule
+        ListViewModule,NgIf
     ],
 
 providers: [VirtualizationService],
 standalone: true,
     selector: 'my-app',
-    template: `<ejs-listview id='ui-list' [dataSource]='listData' [enableVirtualization]='true' [height]=500 headerTitle='Contacts' [showHeader]='true'>
-    <ng-template #template let-data="">
-        <div class="list-container">
-        <div id="icon" *ngIf="data.icon !== ''" class={{data.icon}}>
-            <span class="showUI">{{data.icon}}</span>
-            <img class="hideUI" width = '45' height = '45' src={{data.imgUrl}} />
-        </div>
-        <div id="icon" *ngIf="data.imgUrl !== ''" class="img">
-            <span class="hideUI">{{data.icon}}</span>
-            <img class="showUI" width = '45' height = '45' src={{data.imgUrl}} />
-        </div>
-        <div class="name">{{data.name}}</div>
-        </div>
-  </ng-template>
+    template: `<ejs-listview
+    id="ui-list"
+    #listviewInstance
+    [dataSource]="listData"
+    [cssClass]="cssClass"
+    [enableVirtualization]="true"
+    headerTitle="Contacts"
+    [fields]="fields"
+    height="500"
+    [template]="template"
+    [showHeader]="true"
+  >
+    <ng-template #template let-data>
+      <div class="e-list-wrapper e-list-avatar">
+        <span
+          *ngIf="!data.imgUrl"
+          class="e-avatar e-avatar-circle {{ data.icon }} showUI"
+          >{{ data.icon }}</span
+        >
+        <img
+          *ngIf="data.imgUrl"
+          class="e-avatar e-avatar-circle showUI"
+          src="{{ data.imgUrl }}"
+          alt="{{ data.altText }}"
+        />
+        <span class="e-list-content">{{ data.name }}</span>
+      </div>
+    </ng-template>
   </ejs-listview>`
 })
 
 export class AppComponent {
-   public listData: { [key: string]: string | object }[] = [
-    { name: 'Nancy', icon: 'N', imgUrl:'', id: '0', },
-    { name: 'Andrew', icon: 'A', imgUrl:'', id: '1' },
-    { name: 'Janet', icon: 'J', imgUrl:'', id: '2' },
-    { name: 'Margaret', icon: '', imgUrl: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png', id: '3' },
-    { name: 'Steven', icon: 'S', imgUrl:'', id: '4' },
-    { name: 'Laura', icon: '', imgUrl: 'https://ej2.syncfusion.com/demos/src/grid/images/3.png', id: '5' },
-    { name: 'Robert', icon: 'R', imgUrl:'', id: '6' },
-    { name: 'Michael', icon: 'M', imgUrl:'', id: '7' },
-    { name: 'Albert', icon: '', imgUrl: 'https://ej2.syncfusion.com/demos/src/grid/images/5.png', id: '8' },
-    { name: 'Nolan', icon: 'N', imgUrl:'', id: '9' }
-];
+    public cssClass: string = 'e-list-template';
+    constructor() {}
+
+    public listData: { [key: string]: string | object }[] = [
+      { name: 'Nancy', icon: 'N', imgUrl: '', id: '0' },
+      { name: 'Andrew', icon: 'A', imgUrl: '', id: '1' },
+      { name: 'Janet', icon: 'J', imgUrl: '', id: '2' },
+      {
+        name: 'Margaret',
+        icon: '',
+        imgUrl: 'https://ej2.syncfusion.com/demos/src/grid/images/2.png',
+        id: '3',
+      },
+      { name: 'Steven', icon: 'S', imgUrl: '', id: '4' },
+      {
+        name: 'Laura',
+        icon: '',
+        imgUrl: 'https://ej2.syncfusion.com/demos/src/grid/images/3.png',
+        id: '5',
+      },
+      { name: 'Robert', icon: 'R', imgUrl: '', id: '6' },
+      { name: 'Michael', icon: 'M', imgUrl: '', id: '7' },
+      {
+        name: 'Albert',
+        icon: '',
+        imgUrl: 'https://ej2.syncfusion.com/demos/src/grid/images/5.png',
+        id: '8',
+      },
+      { name: 'Nolan', icon: 'N', imgUrl: '', id: '9' },
+    ];
 
-public ngOnInit() {
-    for (let i: number = 10; i <= 1010; i++) {
+    public ngOnInit() {
+      for (let i: number = 10; i <= 1010; i++) {
         let index: number = parseInt((Math.random() * 10).toString());
-        this.listData.push({ name: (this.listData[index] as any).name, icon: (this.listData[index] as any).icon, imgUrl: (this.listData[index] as any).imgUrl, id: i.toString() });
-    }
+
+        this.listData.push({
+            name: (this.listData[index] as any).name,
+            icon: (this.listData[index] as any).icon,
+            imgUrl: (this.listData[index] as any).imgUrl,
+            id: i.toString(),
+          });
+        }      
+    }  
+    public fields: Object = { text: 'name' };
+
 }
-}
-
-
-