### File

`packages/ecl/components/ecl-mega-menu/ecl-mega-menu-item/ecl-mega-menu-item.component.ts`

### Description

This component represents a mega menu item. Adds functionality and styling, according to ECL standards.

### Extends

`ECLBaseDirective`

### Implements

`AfterContentInit` `OnDestroy`

### Metadata

selector | `li[eclMegaMenuItem]`
imports | `RouterLink` `RouterLinkWithHref` `EUI_ECL_BUTTON` `EUI_ECL_ICON` `EUI_ECL_LINK`
templateUrl | `./ecl-mega-menu-item.component.html`

### Index

###### Properties
containerStyleHeight eclMegaMenuContainer eclMegaMenuFeatured eclMegaMenuInfo eclMegaMenuMega eclMegaMenuSublist eclMegaMenuSublists el hasPopup isCurrent isExpanded isMobileBreakpoint mainPanel megaMenuMegaStyleHeight megaMenuMegaStyleOpacity menuBtn menuLink renderer wrapperStyleHeight wrapperStyleTop
###### Methods
onFocus onKeydown onMegaMenuItemClick onMegaMenuItemCollapse getCssClasses
###### Inputs
href isPromotional label linkExtraAttributes queryParams queryParamsHandling routerLink target isOneLevelOnly class e2eAttr tabindex
###### Outputs
megaMenuItemClicked megaMenuItemKeydown
###### HostBindings
attr.aria-haspopup class
###### Accessors
cssClasses hasNoInfo hasChildren hasSublist hasFeatured hasContainer

### Constructor

`constructor()`

### Inputs

href
Type : `string`
Default value : `''`

isPromotional
Type : `boolean`
Default value : `false`

label
Type : `string`

linkExtraAttributes
Type : `literal type`
Used in case user wants to set some custom attributes for the anchr tag.

queryParams
Type : `Params | null`
Default value : `null`

queryParamsHandling
Type : `QueryParamsHandling`
Default value : `null`

routerLink
Type : `string | any[]`
Default value : `null`

target
Type : `string`
Default value : `''`

isOneLevelOnly
Default value : `false, { transform: booleanAttribute }`
This property should be used, when user wants the menu sub-items to use the maximum space available. For example, if we have 10 sub-items, normally they will appear in one column only. If isOneLevelOnly is used, the sub-items will take 2, 3, 4 columns, depending on presence of other sub-components.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

megaMenuItemClicked
Type : `EventEmitter`

megaMenuItemKeydown
Type : `EventEmitter`

### HostBindings

attr.aria-haspopup
Type : `boolean`
Default value : `this.hasChildren ? true : null`

class
Type : `string`
Returns current menu item classes, depending on item's state (it's properties' values).

### Methods

onFocus
`onFocus()`
Set the focus on the sub element - link or button. Returns : `void`

onKeydown
`onKeydown(evt: Event)`
Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onMegaMenuItemClick
`onMegaMenuItemClick()`
Manage styling and functionality for children and siblings, when item is clicked. Returns : `void`

onMegaMenuItemCollapse
`onMegaMenuItemCollapse()`
Manage styling and functionality when item is collapsed. Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Properties

containerStyleHeight
Type : `number | null`
Default value : `null`

eclMegaMenuContainer
Type : `EclMegaMenuContainerDirective`
Decorators : `@ContentChild(undefined)`
Component, that consist of some custom info, text or whatever. When the menu item has no children, but still some sub container is displayed.

eclMegaMenuFeatured
Type : `EclMegaMenuFeaturedComponent`
Decorators : `@ContentChild(undefined, {descendants: false})`

eclMegaMenuInfo
Type : `EclMegaMenuInfoComponent`
Decorators : `@ContentChild(undefined)`
Element, that would contain some info about the current item or it's children. First in the container.

eclMegaMenuMega
Type : `ElementRef`
Decorators : `@ViewChild('eclMegaMenuMega')`
The wrapper around the subitems, if any.

eclMegaMenuSublist
Type : `EclMegaMenuSublistDirective`
Decorators : `@ContentChild(undefined)`
Element, that holds the sub items of the current menu items.

eclMegaMenuSublists
Type : `QueryList<EclMegaMenuFeaturedComponent>`
Decorators : `@ContentChildren(undefined, {descendants: true})`

el
Type : `unknown`
Default value : `inject(ElementRef)`

hasPopup
Type : `unknown`
Default value : `this.hasChildren ? true : null`
Decorators : `@HostBinding('attr.aria-haspopup')`

isCurrent
Type : `unknown`
Default value : `false`

isExpanded
Type : `unknown`
Default value : `false`

isMobileBreakpoint
Type : `unknown`
Default value : `false`

mainPanel
Type : `ElementRef`
Decorators : `@ViewChild('mainPanel')`
This elemend hold some extra content, different from subitems. For example just some text or some custom links, etc.

megaMenuMegaStyleHeight
Type : `number | null`
Default value : `null`

megaMenuMegaStyleOpacity
Type : `number | null`
Default value : `null`

menuBtn
Type : `EclButtonComponent`
Decorators : `@ViewChild('menuBtn')`
Element, tat is rendered if the menu item has children.

menuLink
Type : `EclLinkDirective`
Decorators : `@ViewChild(EclLinkDirective)`
Actual link of the menu item. If the menu has no children, but redirects/loads another page.

renderer
Type : `unknown`
Default value : `inject(Renderer2)`

wrapperStyleHeight
Type : `number | null`
Default value : `null`

wrapperStyleTop
Type : `number | null`
Default value : `null`

### Accessors

cssClasses
get `cssClasses()`
Returns current menu item classes, depending on item's state (it's properties' values). Returns : `string`

hasNoInfo
get `hasNoInfo()`

hasChildren
get `hasChildren()`

hasSublist
get `hasSublist()`

hasFeatured
get `hasFeatured()`

hasContainer
get `hasContainer()`

# results matching ""

# No results matching ""