@progress/kendo-angular-menu
Version:
Kendo UI Angular Menu component
148 lines (147 loc) • 5.39 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, Input, ContentChildren, QueryList } from '@angular/core';
import { ItemTemplateDirective } from './templates/item-template.directive';
import { ItemLinkTemplateDirective } from './templates/item-link-template.directive';
import { ItemContentTemplateDirective } from './templates/item-content-template.directive';
import * as i0 from "@angular/core";
/**
* Represents a component that can be used to specify the Menu items
* ([more information and examples]({% slug items_menu %})).
*
* @example
* ```html
* <kendo-menu>
* <kendo-menu-item text="item1">
* <kendo-menu-item text="item1.1" url="https://example.com">
* </kendo-menu-item>
* <kendo-menu-item text="item1.2" [disabled]="true">
* </kendo-menu-item>
* </kendo-menu-item>
* <kendo-menu-item text="item2">
* <ng-template kendoMenuItemContentTemplate let-item="item">
* <div style="padding: 10px;">
* My Content Template: {{ item.text }}
* </div>
* </ng-template>
* <ng-template kendoMenuItemTemplate let-item="item">
* <div style="padding: 10px;">
* My Template: {{ item.text }}
* </div>
* </ng-template>
* </kendo-menu-item>
* <kendo-menu-item text="item3">
* <ng-template kendoMenuItemLinkTemplate let-item="item" let-index="index">
* <span [kendoMenuItemLink]="index">
* {{ item.text }}
* <span *ngIf="item.items && item.items.length" [kendoMenuExpandArrow]="index"></span>
* </span>
* </ng-template>
* </kendo-menu-item>
* </kendo-menu>
* ```
*
* @remarks
* Supported children components are: {@link MenuItemComponent}.
*/
export class MenuItemComponent {
text;
url;
disabled;
cssClass;
cssStyle;
icon;
svgIcon;
data;
separator;
/**
* @hidden
*/
itemTemplate;
/**
* @hidden
*/
itemLinkTemplate;
/**
* @hidden
*/
itemContentTemplate;
/**
* @hidden
*/
children;
/**
* @hidden
*/
get template() {
if (this.itemTemplate && this.itemTemplate.length) {
return this.itemTemplate.first.templateRef;
}
}
/**
* @hidden
*/
get linkTemplate() {
if (this.itemLinkTemplate && this.itemLinkTemplate.length) {
return this.itemLinkTemplate.first.templateRef;
}
}
/**
* @hidden
*/
get contentTemplate() {
if (this.itemContentTemplate && this.itemContentTemplate.length) {
return this.itemContentTemplate.first.templateRef;
}
}
/**
* @hidden
*/
get items() {
if (this.children.length) {
return this.children.toArray().filter(c => c !== this);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MenuItemComponent, isStandalone: true, selector: "kendo-menu-item", inputs: { text: "text", url: "url", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", icon: "icon", svgIcon: "svgIcon", data: "data", separator: "separator" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "itemContentTemplate", predicate: ItemContentTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuItemComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-menu-item',
template: ``,
standalone: true
}]
}], propDecorators: { text: [{
type: Input
}], url: [{
type: Input
}], disabled: [{
type: Input
}], cssClass: [{
type: Input
}], cssStyle: [{
type: Input
}], icon: [{
type: Input
}], svgIcon: [{
type: Input
}], data: [{
type: Input
}], separator: [{
type: Input
}], itemTemplate: [{
type: ContentChildren,
args: [ItemTemplateDirective]
}], itemLinkTemplate: [{
type: ContentChildren,
args: [ItemLinkTemplateDirective]
}], itemContentTemplate: [{
type: ContentChildren,
args: [ItemContentTemplateDirective]
}], children: [{
type: ContentChildren,
args: [MenuItemComponent]
}] } });