Adding Spacings between the ToolBar Tools

Environment

Description

How can I add space between the ToolBar tools?

Solution

Create a custom tool that holds a div container and add the k-spacer utility class to the parent element.

Copy Code    <ng-template #toolbarTemplate>
        <div #spacer></div>
    </ng-template>

Copy Code    public ngAfterViewInit(): void {
        this.spacer.nativeElement.parentElement.classList.add('k-spacer');
    }

The k-spacer enables you to define additional white space between the toolbar tools and arrange them in accordance with your preference. By default, the k-spacer CSS class is equivalent to flex: 1 0 auto;. If every other element has a fixed size in a flex container, the spacer will take up the remaining space.

The following example demonstrates the suggested approach.