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.
Unfortunately, activation email could not send to your email. Please try again.

Finding syncfusion component in template within angular projection

Thread ID:

Created:

Updated:

Platform:

Replies:

128074 Dec 30,2016 11:07 AM Jan 2,2017 08:06 AM Angular 2
loading
Tags: General
Me
Asked On December 30, 2016 11:07 AM

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
Replied On December 30, 2016 11:08 AM

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

Abinaya Subbiah [Syncfusion]
Replied On January 2, 2017 08:06 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;