Creating Custom Wrapper Components in Angular for Syncfusion Components

3 mins read

Creating custom wrapper components is a common practice to encapsulate and customize the behavior of third-party components like those from Syncfusion. This article will guide you through the process of wrapping Syncfusion components within custom components in Angular.

Create Custom Wrapper Component

To start, you’ll need to create custom wrapper components for the Syncfusion components you want to use. These wrappers will act as a bridge between the Syncfusion components and your application, allowing you to add custom functionality or styling.

Use Inputs and Outputs

Angular’s @Input and @Output decorators are essential for passing data and events between your application and the Syncfusion components. They help you manage the data flow and handle events effectively.

Example Implementation

Below is an example of how to create a custom wrapper component for the Syncfusion grid component in Angular:

customgrid.component.ts

// customgrid.component.ts
import { Component, Input } from '@angular/core';
 
@Component({
   selector: 'app-custom-grid',
   template: `
<h1>Syncfusion Angular UI Custom Grid!</h1>
<ejs-grid [dataSource]='data'>
<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>`
})
export class CustomGridComponent {
   @Input() data!: object[];
}

app.component.ts

import { Component } from '@angular/core';
import { data } from './datasource';
 
@Component({
   selector: 'app-root',
   template: `<app-custom-grid [data]='data'></app-custom-grid>`
})
export class AppComponent {
   public data!: object[];
   ngOnInit(): void {
       this.data = [
           // ... array of data objects ...
       ];
   }
}

Explore the provided sample to see the Custom Wrapper Components for Syncfusion:

wrap components

Additional References

For more detailed information and features, please refer to the Syncfusion documentation and online samples:

Did you find this information helpful?

Yes

Comments (0)