Creating Custom Wrapper Components in Angular for Syncfusion Components

3 mins read

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

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:

Conclusion

We hope you enjoyed about how to create Custom Wrapper Components in Angular for Syncfusion Components.

You can refer to our Angular feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)