### File

`packages/ecl/components/ecl-gallery/ecl-gallery.component.ts`

### Description

This component represents a collection of images or videos and allows a user to browse them. Adds functionality and styling, according to the ECL standards.

### Extends

`ECLBaseDirective`

### Implements

`AfterContentInit` `OnDestroy` `AfterViewInit`

### Metadata

selector | `ecl-gallery`
imports | `TranslateModule` `NgTemplateOutlet` `EUI_ECL_BUTTON` `EUI_ECL_ICON` `EUI_ECL_LINK`
styles | `:host { display: block; }`
templateUrl | `./ecl-gallery.component.html`

### Index

###### Properties
footerChild galleryFooter galleryItems headerChild isDialogVisible isMobile item itemIndex itemsCount overlayChild role
###### Methods
canBeOpenInFullScreen canBeShared getIframeHeight getIframeWidth onClose onEscapeKeydownHandler onFullScreenOpen onNext onPrevious onShare setIframeDimensions getCssClasses
###### Inputs
columns gridTemplate isFullWidth isGrid isNoOverlay isOpenInFullScreenPossible isShareable isShowTitleOnHover maxVisibleItems ratio class e2eAttr tabindex
###### Outputs
hide itemSwitch openFullScreen share show
###### HostBindings
attr.role class
###### HostListeners
document:keydown.escape
###### Accessors
cssClasses

### Inputs

columns
Type : `"2" | "3" | "4" | number`
Default value : `3`

gridTemplate
Type : `"0" | "1" | "2" | "3" | "4" | string`
Default value : `'0'`
This property can be used with 'isGrid' property set to true. By default gridTemplate is 0 and all the thimbnails have same size. If another template value is set, some additional formatting is applied and the thumbnails will have different sizes.

isFullWidth
Type : `boolean`
Default value : `false`
If set to true, the gallery will have 100 view width.

isGrid
Type : `boolean`
Default value : `false`
If set to true, a specific class will be applied, so the gallery thumbnails are displayed as a grid, all with same size.

isNoOverlay
Type : `boolean`
Default value : `false`
If set to true, no overlay will be displayed when user clicks on an image.

isOpenInFullScreenPossible
Type : `boolean`
Default value : `true`

isShareable
Type : `boolean`
Default value : `true`
If the items in the gallery can be shared. I.e. if the link for sharing will be present for each item.

isShowTitleOnHover
Type : `boolean`
Default value : `true`
If set to false, no title will be displayed when user hover on a gallery item.

maxVisibleItems
Type : `number`
Number of gallery items to be displayed by default. The rest can be displayed with the 'View all' button.

ratio
Type : `"3-1" | "3-2" | string`
Default value : `'3-2'`
The ratio that will be applied to the gallery thumbnails.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

hide
Type : `EventEmitter`
Emits event when an expanded item is closed.

itemSwitch
Type : `EventEmitter`
Emits event when user is browsing items, opened in an overlay.

openFullScreen
Type : `EventEmitter`
Emits event when an item is opened in full screen.

share
Type : `EventEmitter`
Emits event when an item is shared.

show
Type : `EventEmitter`
Emits event when user clicks on an item to expand it.

### HostBindings

attr.role
Type : `string`
Default value : `'region'`
The default role of the component is 'region' and should not be changed.

class
Type : `string`
Applies specific clases to the component, related to the component properties values.

### HostListeners

document:keydown.escape
`document:keydown.escape()`
On pressing 'esc' key - close the item dialog and emit 'hide' event. Parameters :
Name | Optional
event | No

### Methods

canBeOpenInFullScreen
`canBeOpenInFullScreen()`
Returns : `boolean`

canBeShared
`canBeShared()`
Returns : `boolean`

getIframeHeight
`getIframeHeight()`
Returns : `number`

getIframeWidth
`getIframeWidth()`
Returns : `number`

onClose
`onClose(evt: MouseEvent)`
Emit 'hide' event, when closing item dialog. Parameters :
Name | Type | Optional
evt | `MouseEvent` | No
Returns : `void`

onEscapeKeydownHandler
`onEscapeKeydownHandler()`
Decorators : `@HostListener('document:keydown.escape')`
On pressing 'esc' key - close the item dialog and emit 'hide' event. Returns : `void`

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

onNext
`onNext(evt: MouseEvent)`
Emit 'itemSwitch' event, when switching to the next item. Event contains the new current item. Parameters :
Name | Type | Optional
evt | `MouseEvent` | No
Returns : `void`

onPrevious
`onPrevious(evt: MouseEvent)`
Emit 'itemSwitch' event, when switching to the previous item. Event contains the new current item. Parameters :
Name | Type | Optional
evt | `MouseEvent` | No
Returns : `void`

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

setIframeDimensions
`setIframeDimensions()`
Returns : `void`

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

### Properties

footerChild
Type : `ElementRef`
Decorators : `@ViewChild('footer')`

galleryFooter
Type : `EclGalleryFooterComponent`
Decorators : `@ContentChild(EclGalleryFooterComponent)`

galleryItems
Type : `QueryList<EclGalleryItemComponent>`
Decorators : `@ContentChildren(EclGalleryItemComponent)`

headerChild
Type : `ElementRef`
Decorators : `@ViewChild('header')`

isDialogVisible
Type : `unknown`
Default value : `false`

isMobile
Type : `unknown`
Default value : `false`

item
Type : `EclGalleryItemComponent`

itemIndex
Type : `number`

itemsCount
Type : `number`

overlayChild
Type : `ElementRef`
Decorators : `@ViewChild('overlay')`

role
Type : `string`
Default value : `'region'`
Decorators : `@HostBinding('attr.role')`
The default role of the component is 'region' and should not be changed.

### Accessors

cssClasses
get `cssClasses()`
Applies specific clases to the component, related to the component properties values. Returns : `string`

# results matching ""

# No results matching ""