We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Finding syncfusion component in template within angular projection

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?
    };

2 Replies

ME Me December 30, 2016 04:08 PM UTC

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


AS Abinaya Subbiah Syncfusion Team January 2, 2017 01:06 PM UTC

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. 


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


Loader.
Live Chat Icon For mobile
Up arrow icon