### File

`packages/ecl/components/ecl-news-ticker/ecl-news-ticker.component.ts`

### Extends

`ECLBaseDirective`

### Implements

`OnDestroy`

### Metadata

selector | `ecl-news-ticker`
imports | `EUI_ECL_BUTTON` `EUI_ECL_ICON` `EclNewsTickerItemComponent` `TranslateModule`
templateUrl | `./ecl-news-ticker.component.html`

### Index

###### Properties
firstHiddenItem itemIndex lastHiddenItem newsTickerItems pauseBtn playBtn playing slidesContainer slidesTransform transitionDuration
###### Methods
cancelAutoplay nextSlide onNewsTickerItemMouseOut onNewsTickerItemMouseOver onNext onPauseBtnEnter onPlayBtnEnter onPrevious onResize previousSlide startAutoplay getCssClasses
###### Inputs
isAutoplay class e2eAttr tabindex
###### Outputs
itemSwitch
###### HostBindings
class
###### HostListeners
window:resize
###### Accessors
cssClasses contentHeight itemsCount isShowControls

### Constructor

`constructor(renderer2: Renderer2, cd: ChangeDetectorRef)`
Parameters :
Name | Type | Optional
renderer2 | `Renderer2` | No
cd | `ChangeDetectorRef` | No

### Inputs

isAutoplay
Type : `boolean`
Default value : `true`
Enables or disables automatic cycling through ticker items. Defaults to `true`.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

itemSwitch
Type : `EventEmitter`
Emits when the visible news ticker item changes. The payload is an instance of `EclNewsTickerItemEvent`.

### HostBindings

class
Type : `string`

### HostListeners

window:resize
Arguments : `'$event'`
`window:resize(event)`
Handles window resize and recalculates the layout.

### Methods

cancelAutoplay
`cancelAutoplay()`
Cancels the automatic cycling of the ticker items. Returns : `void`

nextSlide
`nextSlide()`
Moves to the next slide and emits `itemSwitch` event. Returns : `void`

onNewsTickerItemMouseOut
`onNewsTickerItemMouseOut()`
Handles mouse out event from a ticker item. Resumes autoplay if it was paused due to hover. Returns : `void`

onNewsTickerItemMouseOver
`onNewsTickerItemMouseOver()`
Handles mouse over event on a ticker item. Temporarily pauses autoplay. Returns : `void`

onNext
`onNext()`
Handles "next" button click. Navigates to the next slide and stops autoplay. Returns : `void`

onPauseBtnEnter
`onPauseBtnEnter(evt: Event)`
Handles focus event on the "Pause" button. Stops autoplay and shifts focus to the "Play" button. Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onPlayBtnEnter
`onPlayBtnEnter(evt: Event)`
Handles focus event on the "Play" button. Starts autoplay and shifts focus to the "Pause" button. Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onPrevious
`onPrevious()`
Handles "previous" button click. Navigates to the previous slide and stops autoplay. Returns : `void`

onResize
`onResize(event)`
Decorators : `@HostListener('window:resize', ['$event'])`
Handles window resize and recalculates the layout. Parameters :
Name | Optional
event | No
Returns : `void`

previousSlide
`previousSlide()`
Moves to the previous slide and emits `itemSwitch` event. Returns : `void`

startAutoplay
`startAutoplay()`
Starts automatic cycling of the ticker items. Returns : `void`

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

### Properties

firstHiddenItem
Type : `EclNewsTickerItemComponent`
Decorators : `@ViewChild('firstHiddenItem')`
Reference to the hidden first item used for looping.

itemIndex
Type : `number`
Default value : `1`

lastHiddenItem
Type : `EclNewsTickerItemComponent`
Decorators : `@ViewChild('lastHiddenItem')`
Reference to the hidden last item used for looping.

newsTickerItems
Type : `QueryList<EclNewsTickerItemComponent>`
Decorators : `@ContentChildren(EclNewsTickerItemComponent)`
Query list of all `EclNewsTickerItemComponent` children projected into this component.

pauseBtn
Type : `EclButtonComponent`
Decorators : `@ViewChild('pauseBtn')`
Reference to the pause button used to stop autoplay.

playBtn
Type : `EclButtonComponent`
Decorators : `@ViewChild('playBtn')`
Reference to the play button used to start autoplay.

playing
Default value : `false`

slidesContainer
Type : `ElementRef`
Decorators : `@ViewChild('slidesContainer')`
Reference to the container element that holds the slides.

slidesTransform
Type : `string`
Default value : `''`

transitionDuration
Type : `number`

### Accessors

cssClasses
get `cssClasses()`

contentHeight
get `contentHeight()`
Returns the height of the currently visible ticker item. Returns : `number`

itemsCount
get `itemsCount()`
Returns the number of ticker items. Returns : `number`

isShowControls
get `isShowControls()`
Indicates whether navigation controls should be shown. Returns : `boolean`

# results matching ""

# No results matching ""