Finding syncfusion component in template within angular projection

[Me]

Hello,

What is the best way to find syncfusion component in template without id? In my case, I'm building reusable component like this:


app.component.html
<my-custom-grid>
     <ej-grid></ej-grid>
</my-custom-grid>

myCustomGrid.component.ts
@Component({
    selector: 'my-custom-grid',
    template: ` <div style="background-color: orange;">
                            <ng-content></ng-content>
                </div> `
})

export class MyCustomGridComponent {

    ngAfterInit(){
        // I need to call ejGrid and call custom SyncFusion settings withthout setting id in advance as this control might be reused plenty of times at the same time and dublicates might occur
        // How can I do that here?
    };

[Me]

P.S. I use your Webpack sample (if that changes anything).

[Abinaya Subbiah]

Hi Mantelisb, 

Thanks for contacting Syncfusion support. 

Yes, we can reuse the Syncfusion components without using id, moreover  Syncfusion JavaScript component id will be automatically  generated. We can reuse the components in following two ways.  

1.       Render ejGrid component by querying “custom-grid” component 

2.       Render ejGrid as nested component of “custom-grid”. 

  

 

Render ejGrid component by querying “custom-grid” component 

 

We can use “ej-grid” within custom component as template and define the component property in component class by getting component reference from child references. Please find the below code snippet for custom component. 

[custom-grid/custom-grid-conetent.component.ts] 

 

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

 

@Component({ 

    selector: 'custom-grid-content', 

    template: ` <div style="background-color: orange;">  

                 <ng-content></ng-content> 

                </div> ` 

}) 

export class CustomGridContentComponent { 

    data: Array<any>; 

    constructor(public el: ElementRef) { 

        this.data = [{ OrderID: 10280, CustomerID: "BERGS", EmployeeID: 2, OrderDate: new Date(840006e6), RequiredDate: new Date(8424252e5), ShippedDate: new Date(8425116e5), ShipVia: 1, Freight: 8.98, ShipName: "Berglunds snabbköp", ShipAddress: "Berguvsvägen  8", ShipCity: "Luleå", ShipRegion: null, ShipPostalCode: "S-958 22", ShipCountry: "Sweden", CompanyName: "Berglunds snabbköp", Address: "Berguvsvägen  8", City: "Luleå", Region: null, PostalCode: "S-958 22", Country: "Sweden" }, { OrderID: 10265, CustomerID: "BLONP", EmployeeID: 2, OrderDate: new Date(838278e6), RequiredDate: new Date(8406972e5), ShippedDate: new Date(8398332e5), ShipVia: 1, Freight: 55.28, ShipName: "Blondel père et fils", ShipAddress: "24, place Kléber", ShipCity: "Strasbourg", ShipRegion: null, ShipPostalCode: "67000", ShipCountry: "France", CompanyName: "Blondesddsl père et fils", Address: "24, place Kléber", City: "Strasbourg", Region: null, PostalCode: "67000", Country: "France" }, { OrderID: 10663, CustomerID: "BONAP", EmployeeID: 2, OrderDate: new Date(8738748e5), RequiredDate: new Date(8750844e5), ShippedDate: new Date(875862e6), ShipVia: 2, Freight: 113.15, ShipName: "Bon app'", ShipAddress: "12, rue des Bouchers", ShipCity: "Marseille", ShipRegion: null, ShipPostalCode: "13008", ShipCountry: "France", CompanyName: "Bon app'", Address: "12, rue des Bouchers", City: "Marseille", Region: null, PostalCode: "13008", Country: "France" }]; 

    } 

    ngOnInit() { 

        $(this.el.nativeElement.querySelector('ej-grid')).ejGrid({ dataSource: this.data, allowPaging: true }); 

    } 

}; 

[grid.component.html] 

 

<custom-grid-content > 

    <ej-grid></ej-grid> 

</custom-grid-content> 

 

Render ejGrid as nested component of “custom-grid” 

 

Another way is, we can use “ej-grid” component as child component of “custom-grid” component as like the below code snippet. Now, “custom-grid” will render the “ej-grid” component. The property binding of parent-component will be used as the property of child component. 

[custom-grid/custom-grid.component.ts] 

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

 

 

@Component({ 

    selector: 'custom-grid', 

    template: ` <div style="background-color: orange;">  

                  <ej-grid [dataSource] = 'data' ></ej-grid> 

                </div> ` 

}) 

 

export class CustomGridComponent { 

    @Input() data: Array<any>; 

}; 

  

[grid/grid.component.html] 

<custom-grid [data]="gridData"> 

     

</custom-grid> 

[grid/grid.component.ts] 

 

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

 

 

@Component({ 

    selector: 'ej-app', 

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

}) 

export class GridComponent { 

    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 

        } 

       ]; 

    } 

} 

 

We have also prepared a simple sample to achieve your requirement and refer to the below link for sample. 

Sample 

Please revert us back, if you we misunderstood your requirement. 

  

Regards, 

Abinaya S