I am working with Syncfusion grids and I created two components, each displaying a table with 2 rows initially. I created a show more button that should add two extra rows every time it is clicked. The button in component-one works as expected, but the button in component-two is not displaying the extra two rows when clicked. I am not seeing any errors in the console and really cannot figure out why it's not working....If I remove component-one then the button in component-two starts working as expected. Both components have the same functionality so I don't understand why the show more button in component-two is not working.
component-one.component.html
<ejs-grid [dataSource]="data.slice(0, items)">
<e-columns>
<e-column
field="OrderID"
headerText="Order ID"
textAlign="Right"
width="90"
></e-column>
<e-column
field="CustomerID"
headerText="Customer ID"
width="120"
></e-column>
<e-column
field="Freight"
headerText="Freight"
textAlign="Right"
format="C2"
width="90"
></e-column>
<e-column
field="OrderDate"
headerText="Order Date"
textAlign="Right"
format="yMd"
width="120"
></e-column>
</e-columns>
</ejs-grid>
<button (click)="showMore()">show more</button>
component-one.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-component-one',
templateUrl: './component-one.component.html',
styleUrls: ['./component-one.component.scss'],
})
export class ComponentOneComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
data: object[] = [
{
OrderID: 10258,
CustomerID: 'ERNSH',
EmployeeID: 1,
OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel',
ShipCity: 'Graz',
ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ',
ShipPostalCode: '8010',
ShipCountry: 'Austria',
Freight: 140.51,
Verified: !0,
},
{
OrderID: 10259,
CustomerID: 'CENTC',
EmployeeID: 4,
OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma',
ShipCity: 'México D.F.',
ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ',
ShipPostalCode: '05022',
ShipCountry: 'Mexico',
Freight: 3.25,
Verified: !1,
},
{
OrderID: 10260,
CustomerID: 'OTTIK',
EmployeeID: 4,
OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen',
ShipCity: 'Köln',
ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ',
ShipPostalCode: '50739',
ShipCountry: 'Germany',
Freight: 55.09,
Verified: !0,
},
{
OrderID: 10261,
CustomerID: 'QUEDE',
EmployeeID: 4,
OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ',
ShipPostalCode: '02389-673',
ShipCountry: 'Brazil',
Freight: 3.05,
Verified: !1,
},
{
OrderID: 10262,
CustomerID: 'RATTC',
EmployeeID: 8,
OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery',
ShipCity: 'Albuquerque',
ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM',
ShipPostalCode: '87110',
ShipCountry: 'USA',
Freight: 48.29,
Verified: !0,
},
];
items: number = 2;
showMore() {
this.items += 2;
}
}
component-two.component.html
<ejs-grid [dataSource]="data.slice(0, items)">
<e-columns>
<e-column
field="OrderID"
headerText="Order ID"
textAlign="Right"
width="90"
></e-column>
<e-column
field="CustomerID"
headerText="Customer ID"
width="120"
></e-column>
<e-column
field="Freight"
headerText="Freight"
textAlign="Right"
format="C2"
width="90"
></e-column>
<e-column
field="OrderDate"
headerText="Order Date"
textAlign="Right"
format="yMd"
width="120"
></e-column>
</e-columns>
</ejs-grid>
<button (click)="showMore()">show more</button>
component-two.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-component-two',
templateUrl: './component-two.component.html',
styleUrls: ['./component-two.component.scss'],
})
export class ComponentTwoComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
data: object[] = [
{
OrderID: 10258,
CustomerID: 'ERNSH',
EmployeeID: 1,
OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel',
ShipCity: 'Graz',
ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ',
ShipPostalCode: '8010',
ShipCountry: 'Austria',
Freight: 140.51,
Verified: !0,
},
{
OrderID: 10259,
CustomerID: 'CENTC',
EmployeeID: 4,
OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma',
ShipCity: 'México D.F.',
ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ',
ShipPostalCode: '05022',
ShipCountry: 'Mexico',
Freight: 3.25,
Verified: !1,
},
{
OrderID: 10260,
CustomerID: 'OTTIK',
EmployeeID: 4,
OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen',
ShipCity: 'Köln',
ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ',
ShipPostalCode: '50739',
ShipCountry: 'Germany',
Freight: 55.09,
Verified: !0,
},
{
OrderID: 10261,
CustomerID: 'QUEDE',
EmployeeID: 4,
OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ',
ShipPostalCode: '02389-673',
ShipCountry: 'Brazil',
Freight: 3.05,
Verified: !1,
},
{
OrderID: 10262,
CustomerID: 'RATTC',
EmployeeID: 8,
OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery',
ShipCity: 'Albuquerque',
ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM',
ShipPostalCode: '87110',
ShipCountry: 'USA',
Freight: 48.29,
Verified: !0,
},
];
items: number = 2;
showMore() {
this.items += 2;
}
}
