New to Kendo UI for AngularStart a free 30-day trial

Angular Layout Dependencies and Standalone Utilities

This article explores the utilities provided by the Kendo UI for Angular Layout for standalone components and the required dependencies for the package.

Kendo Angular Layout Utility Arrays

The concept of standalone components in Angular enables you to import only the components and directives in use.

For convenience, all related Layout components and directives are logically combined into a single utility array that you can directly import in your standalone component. At the same time, you can still import individual components, directives, and pipes from the Layout API.

For example, the KENDO_PANELBAR utility array allows you to use the Kendo UI for Angular PanelBar and all its features in your standalone component.

ts
import { Component } from '@angular/core';
import { KENDO_PANELBAR } from '@progress/kendo-angular-layout';

@Component({
    standalone: true,
    selector: 'my-app',
    imports: [KENDO_PANELBAR]
})

The following table lists the exported utility arrays that you can import in your standalone Angular project.

Utility ArrayIncludes
KENDO_AVATARAvatar component
KENDO_CARDCard component
KENDO_DRAWERDrawer component
KENDO_EXPANSIONPANELExpansionPanel component
KENDO_GRIDLAYOUTGridLayout component
KENDO_PANELBARPanelBar component
KENDO_SPLITTERSplitter component
KENDO_STACKLAYOUTStackLayout component
KENDO_STEPPERStepper component
KENDO_TABSTRIPTabStrip component
KENDO_TILELAYOUTTileLayout component
KENDO_TIMELINETimeline component
KENDO_LAYOUTAll Layout components and directives

Kendo Angular Layout Dependencies

The following table lists the required dependencies that the Layout package needs to work as expected.

Package NameDescription
@angular/commonProvides the commonly-needed services, pipes, and directives provided by the Angular team. For more information, refer to the official Angular documentation.
@angular/coreContains critical runtime parts of the Angular framework that are needed by every application. For more information, refer to the official Angular documentation.
@angular/animationsContains the library of Angular animations. For more information, refer to the official Angular documentation.
@progress/kendo-angular-commonContains common utilities that are needed by every Kendo UI for Angular component.
@progress/kendo-angular-l10nProvides the globalization features of Kendo UI for Angular.
@progress/kendo-angular-iconsContains the Kendo UI for Angular Icons.
@progress/kendo-angular-intlProvides the Kendo UI for Angular services and pipes for the parsing and formatting of dates and numbers.
@progress/kendo-angular-progressbarContains the Kendo UI for Angular ProgressBar component.
@progress/kendo-licensingContains the kendo-ui-license CLI utility for license management and the internal infrastructure related to licensing.
rxjsProvides the RxJS library for reactive programming which uses Observables for an easier composition of asynchronous or callback-based code.

Learning Resources