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

ToolBarToolComponent

Directive

Represents the base ToolBar Tool component for Angular.

Extend this class to create a custom tool for the ToolBar.

Definition

Package:@progress/kendo-angular-toolbar

Syntax:

import { Component } from '@angular/core';
import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';

@Component({
   providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => CustomToolComponent) }],
   selector: 'custom-tool',
})

export class CustomToolComponent extends ToolBarToolComponent {

 constructor() {
       super();
   }
}

Methods

canFocus

Determines if the tool can receive focus. Returns true if the tool participates in keyboard navigation.

Returns:

boolean

true if the tool is focusable.

focus

Called when the tool receives focus. Accepts the original browser event, which can be a KeyboardEvent, MouseEvent, or FocusEvent.

Parameters:_ev?Event

The event that triggers focus for the tool.

handleKey

Called when the tool is focused and an arrow key is pressed. Returns a boolean value that determines if the ToolBarComponent moves focus to the next or previous tool (see example).

Parameters:_evKeyboardEvent

The last pressed arrow key.

Returns:

boolean

true if focus moves to another tool.