New to Kendo UI for Angular? Start a free 30-day trial

Wrapping Kendo Components in Custom Angular Component or Directive

Updated on Jan 20, 2026

Description

I am trying to wrap a Kendo Angular component in a custom Angular component to reuse the same configuration across the application.

This knowledge base article also answers the following questions:

How to use the Kendo UI for Angular component within custom components?
How to wrap specific component configuration in a directive?
How to correctly project content into a custom component wrapping a Kendo UI for Angular component?
How to pass information from the parent component to the wrapped component?

Creating Custom Wrapper Component

To wrap the Kendo UI for Angular component within custom components, follow the approach detailed below.

Create a custom Angular component that you want to use across the app.
In your custom component, define the desired Kendo UI for Angular component and bind the necessary properties.

Here is an example of wrapping the Angular Grid component. Use the Angular @Input and @Output decorators to pass data and events to and from the wrapped Grid component.

html

<kendo-grid [data]="data">
@for (column of columns; track column.field) {
  <kendo-grid-column
     field="{{ column.field }}"
     title="{{ column.title }}"
  ></kendo-grid-column>
}
</kendo-grid>

@Component({
  selector: 'my-grid',
  ...
})
export class CommonGridComponent {
  @Input() data: Product[];
  @Input() public columns: ColumnSetting[];
}

Now you can define the wrapper <my-grid> component inside any Angular component and provide the necessary configuration.
html
```

<my-grid [data]="gridData" [columns]="columnsConfig"></my-grid>
```

Creating Custom Wrapper Directive

Creating a wrapper directive is useful in scenarios when you want to apply the same configuration to multiple instances of the same Kendo UI for Angular component. For example, if you already define the Kendo UI for Angular Button where necessary but want to apply the same configuration to all of them.

Create a custom Angular directive that you want to use across the app.

Get the host component reference in the constructor to access all properties for the component and set them as needed.

@Directive({
  selector: '[mySettings]',
})
export class ButtonsDefaultsDirective {
  constructor(hostComponent: ButtonDirective) {
    hostComponent.rounded = 'full';
    hostComponent.size = 'large';
  }
}

Apply the mySettings directive to any Kendo Button to provide the component with a preset configuration. In this case, all buttons will have rounded full and size large.

html

<button mySettings kendoButton>Browse</button>
<button mySettings kendoButton [svgIcon]="folderIcon">Browse</button>
<button mySettings kendoButton [svgIcon]="folderIcon"></button>

(Optional) You can also adjust the directive selector to target specific components. For example, if you want to apply the same configuration to all Kendo UI for Angular Buttons, you can use the kendoButton selector.
ts
```
@Directive({
  selector: '[kendoButton]',
})
```

Wrapping Kendo Components in Custom Angular Component or Directive

Environment

Description

Creating Custom Wrapper Component

Creating Custom Wrapper Directive

See Also