Accessing EJComponents after upgrading to latest version

[Me]

Hey,

After upgrading to latest Syncfusion version I'm not able anymore access ej components as usual via ViewChild. I used to do that this way:

import { EJComponents } from './../../../../../../node_modules/ej-angular2/src/ej/core';

@ViewChild('gpLayoutMenu') private gpLayoutMenu: EJComponents<ej.Menu, any>;

How can I do that after upgrading to latest Syncfusion version?

[Abinaya Subbiah]

Hi Mantelisb, 

Thanks for contacting Syncfusion support. 

We are not able to reproduce the issue at our end. We can access the EJComponents from ej-angular2 package of latest Syncfusion Angular package. Refer to the below code snippet. 

[grid.component.html] 

<ej-grid #mygrid [allowPaging]="true" [allowSorting]="true" [dataSource]="gridData"> 

    <e-columns> 

        <e-column field="OrderID" headerText="Order ID" width="75" textAlign="right"></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" width="80"></e-column> 

        <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"> </e-column> 

        <e-column field="Freight" width="75" format="{0:C}" textAlign="right"></e-column> 

        <e-column field="OrderDate" headerText="Order Date" width="80" format="{0:MM/dd/yyyy}" textAlign="right"></e-column> 

    </e-columns> 

</ej-grid> 

[grid.component.ts] 

import { Component, ViewChild } from '@angular/core'; 

import { EJComponents } from 'ej-angular2'; 

 

@Component({ 

    selector: 'ej-app', 

    templateUrl: './grid.component.html', 

}) 

export class GridComponent { 

    @ViewChild('mygrid') gridIns: EJComponents<any, any>; 

    public gridData: any; 

    constructor() { 

        this.gridData = [{ 

            OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, 

            OrderDate: new Date(8364186e5), Freight: 32.38 

        }, 

        { 

            OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, 

            OrderDate: new Date(836505e6), Freight: 11.61 

        }, 

        { 

            OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, 

            OrderDate: new Date(8367642e5), Freight: 65.83 

        }, 

        { 

            OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, 

            OrderDate: new Date(8367642e5), Freight: 41.34 

        }, 

        { 

            OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, 

            OrderDate: new Date(8368506e5), Freight: 51.3 

        }]; 

    } 

    ngAfterViewInit() { 

        console.log(this.gridIns.model.allowSorting); // Getting component model property 

    } 

} 

 

For your convenience we have prepared sample to accessing EJComponents from ej-angular2 package. Find the attached sample in below link. 

Sample 

Please let us know if you need further assist on this. 

Regards, 

Abinaya S