### File

`packages/ecl/components/ecl-site-header/ecl-site-header.component.ts`

### Description

The Site header offers easily recognisable elements (such as the logo) and the most essential functionality of every site (such as Language switcher or Search form). Additionally it can host the name of the site, the class name to which it belongs and the main navigation. The header is always placed at the top of the page. The elements required in the site header are different depending wether it is the corporate, standardised or an harmonised website.

### Extends

`ECLBaseDirective`

### Implements

`AfterContentInit` `OnDestroy`

### Metadata

selector | `ecl-site-header`
imports | `AsyncPipe` `TranslateModule` `EUI_ECL_LINK` `EclSiteHeaderPictureDirective`
styles | `:host { display: block; }`
templateUrl | `./ecl-site-header.component.html`

### Index

###### Properties
bannerHeader eclHeaderImage eclHeaderLink eclLanguageComponent eclLoginComponent eclMegaMenuComponent eclMenuComponent eclNotificationComponent eclSearchComponent eclThemeService siteHeaderHeader topContainerElement
###### Methods
hasCustomLink onECLogoClick getCssClasses
###### Inputs
isSiteNameMobileOnly languageCode logoSize siteName class e2eAttr tabindex
###### Outputs
languageClick logoClick
###### HostBindings
class
###### Accessors
cssClasses partOfLogoName

### Constructor

`constructor()`

### Inputs

isSiteNameMobileOnly
Type : `boolean`
Default value : `false`
Determines if the site name should be displayed only on mobile devices.

languageCode
Type : `string`
Default value : `'en'`
Language code of the current language of the site.

logoSize
Type : `"s" | "m" | "l"`
Default value : `'m'`
The size of the logo, 's', 'm' or 'l', default to 'm'.

siteName
Type : `string`
The name of the site, to be added in the header, next to the logo.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

languageClick
Type : `EventEmitter`

logoClick
Type : `EventEmitter`

### HostBindings

class
Type : `string`
Adds specific classes to the main element. Depending , logo size, menu and menu status, rtl status.

### Methods

hasCustomLink
`hasCustomLink()`
Returns : `boolean`

onECLogoClick
`onECLogoClick(evt: MouseEvent)`
Parameters :
Name | Type | Optional
evt | `MouseEvent` | No
Returns : `void`

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

### Properties

bannerHeader
Type : `ElementRef`
Decorators : `@ViewChild('bannerHeader')`

eclHeaderImage
Type : `EclSiteHeaderImageDirective`
Decorators : `@ContentChild(undefined, {descendants: true})`

eclHeaderLink
Type : `EclSiteHeaderLinkDirective`
Decorators : `@ContentChild(undefined, {descendants: true})`

eclLanguageComponent
Type : `EclSiteHeaderLanguageComponent`
Decorators : `@ContentChild(EclSiteHeaderLanguageComponent)`

eclLoginComponent
Type : `EclSiteHeaderLoginComponent`
Decorators : `@ContentChild(EclSiteHeaderLoginComponent)`

eclMegaMenuComponent
Type : `EclMegaMenuComponent`
Decorators : `@ContentChild(EclMegaMenuComponent)`

eclMenuComponent
Type : `EclMenuComponent`
Decorators : `@ContentChild(EclMenuComponent)`

eclNotificationComponent
Type : `EclSiteHeaderNotificationComponent`
Decorators : `@ContentChild(EclSiteHeaderNotificationComponent)`

eclSearchComponent
Type : `EclSiteHeaderSearchComponent`
Decorators : `@ContentChild(EclSiteHeaderSearchComponent)`

eclThemeService
Type : `unknown`
Default value : `inject(EclThemeService)`

siteHeaderHeader
Type : `ElementRef`
Decorators : `@ViewChild('siteHeaderHeader')`

topContainerElement
Type : `ElementRef`
Decorators : `@ViewChild('topContainer')`

### Accessors

cssClasses
get `cssClasses()`
Adds specific classes to the main element. Depending , logo size, menu and menu status, rtl status. Returns : `string`

partOfLogoName
get `partOfLogoName()`
This method is used, when current language is not present for our available logo collection. In this case, a default logo is returned. Returns : `string`

# results matching ""

# No results matching ""