### File

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

### Description

This component represents a sub-item in the mega-menu component. Applies styling and functionality.

### Extends

`ECLBaseDirective`

### Implements

`EclMegaMenuItem`

### Metadata

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

### Index

###### Properties
eclMegaMenuFeatured isCurrent isExpanded isMobileBreakpoint labelId level2StyleHeight megaMenuLevel2 submenu subMenuItemBtn subMenuItemLink
###### Methods
getMegaMenuSubItemHeight onButtonClick onFocus onHide onKeydown onLinkClick onShow onSubMenuItemCollapse onSubMenuItemExpand getCssClasses
###### Inputs
buttonId externalIconTitle href isExternal isSeeAll label linkExtraAttributes queryParams queryParamsHandling routerLink target class e2eAttr tabindex
###### Outputs
megaMenuSubItemClicked megaMenuSubItemKeydown
###### HostBindings
attr.aria-expanded class style.display
###### Accessors
cssClasses hasChildren

### Constructor

`constructor(cdkBreakpointObserver: BreakpointObserver, eclMegaMenuDataService: EclMegaMenuDataService, el: ElementRef, eclMegaMenuService: EclMegaMenuService)`
Parameters :
Name | Type | Optional
cdkBreakpointObserver | `BreakpointObserver` | No
eclMegaMenuDataService | `EclMegaMenuDataService` | No
el | `ElementRef` | No
eclMegaMenuService | `EclMegaMenuService` | No

### Inputs

buttonId
Type : `string`
Sets id for the button element.

externalIconTitle
Type : `string`
If the link is external, this will be the title of the external icon.

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

isExternal
Type : `boolean`
Default value : `false`
If the link redirects to external page. Adds an 'external' icon.

isSeeAll
Type : `boolean`
Default value : `false`
Used for the 'View all' link.

label
Type : `string`
Default value : `''`

linkExtraAttributes
Type : `literal type`
Adds custom attributes to an anchor element.

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 : `''`

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

megaMenuSubItemClicked
Type : `EventEmitter`

megaMenuSubItemKeydown
Type : `EventEmitter`

### HostBindings

attr.aria-expanded
Type : `boolean`
Default value : `false`

class
Type : `string`

style.display
Type : `string`
Default value : `''`

### Methods

getMegaMenuSubItemHeight
`getMegaMenuSubItemHeight()`
Returns : `number`

onButtonClick
`onButtonClick()`
Show or hide the subitems. Returns : `void`

onFocus
`onFocus()`
Sets focus on either link or button element. Returns : `void`

onHide
`onHide()`
Returns : `void`

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

onLinkClick
`onLinkClick()`
If link is clicked -> emit event and close all opened menus and submenus. Returns : `void`

onShow
`onShow()`
Returns : `void`

onSubMenuItemCollapse
`onSubMenuItemCollapse()`
Returns : `void`

onSubMenuItemExpand
`onSubMenuItemExpand()`
Returns : `void`

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

### Properties

eclMegaMenuFeatured
Type : `EclMegaMenuFeaturedComponent`
Decorators : `@ContentChild(undefined)`
The component for the featured items.

isCurrent
Default value : `false`

isExpanded
Default value : `false`
Decorators : `@HostBinding('attr.aria-expanded')`

isMobileBreakpoint
Default value : `false`

labelId
Type : `string`

level2StyleHeight
Type : `number | null`
Default value : `null`
Used to set the height of the second level subitems container.

megaMenuLevel2
Type : `ElementRef`
Decorators : `@ViewChild('megaMenuLevel2')`
Wrapper div element of the second level sub-items.

submenu
Type : `EclMegaMenuSublistDirective`
Decorators : `@ContentChild(undefined)`
The directive of the submenu lits.

subMenuItemBtn
Type : `EclButtonComponent`
Decorators : `@ViewChild('subMenuItemBtn')`
The button element, if it exists. Item can have either link or button.

subMenuItemLink
Type : `EclLinkDirective`
Decorators : `@ViewChild(EclLinkDirective)`
The link element, if it exists. Item can have either link or button.

### Accessors

cssClasses
get `cssClasses()`

hasChildren
get `hasChildren()`

# results matching ""

# No results matching ""