### File

`packages/ecl/components/ecl-link/ecl-link.directive.ts`

### Description

'eclLink' directive is used to add some styling to the defalt HTML anchor component. In order to comply with ECL standards.

### Extends

`ECLBaseDirective`

### Implements

`AfterContentInit`

### Metadata

Selector | `[eclLink]`

### Index

###### Properties
cd eclIconComponents el hasIcon renderer
###### Methods
onBlur onClick onFocus getCssClasses
###### Inputs
extraAttributes isHighlight isIconOnly isInverted isNoVisited variant class e2eAttr tabindex
###### HostBindings
class class.ecl-link--icon class.ecl-link--icon-only class.ecl-link--inverted
###### Accessors
hostIsInverted hostIsIconOnly cssClasses

### Constructor

`constructor()`

### Inputs

extraAttributes
Type : `{ name: string; value?: string | null }[] | undefined`
Additional HTML attributes to be set on the link element. Used e.g. by social-media-follow for passing extra_attributes.

isHighlight
Default value : `false, { transform: booleanAttribute }`
Adds class for hightlighted link (works only with 'primary' variant)

isIconOnly
Default value : `false, { transform: booleanAttribute }`
Property to style the component if it consist only of an icon.

isInverted
Default value : `false, { transform: booleanAttribute }`
Property to style the component as 'inverted' (with dark background). Can be used alone or with 'standalone' variant.

isNoVisited
Default value : `false, { transform: booleanAttribute }`

variant
Type : `"standalone" | "primary" | "secondary" | "primary-neutral" | "primary-highlight"`
With 'variant' property user can add some more specific styling to the component.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### HostBindings

class
Type : `string`
Adds speific ECL classes to the component.

class.ecl-link--icon
Type : `any`
Default value : `computed(() => { return this.eclIconComponents()?.length > 0 && !this.isIconOnly(); })`

class.ecl-link--icon-only
Type : `boolean`

class.ecl-link--inverted
Type : `boolean`

### Methods

onBlur
`onBlur()`
Calls the native blur() method of the default HTML element. Returns : `void`

onClick
`onClick()`
Calls the native click() method of the default HTML element. Returns : `void`

onFocus
`onFocus()`
Calls the native focus() method of the default HTML element. Returns : `void`

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

### Properties

cd
Type : `unknown`
Default value : `inject(ChangeDetectorRef)`

eclIconComponents
Type : `unknown`
Default value : `contentChildren(forwardRef(() => EclIconComponent), { descendants: true })`

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

hasIcon
Type : `unknown`
Default value : `computed(() => { return this.eclIconComponents()?.length > 0 && !this.isIconOnly(); })`
Decorators : `@HostBinding('class.ecl-link--icon')`

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

### Accessors

hostIsInverted
get `hostIsInverted()`

hostIsIconOnly
get `hostIsIconOnly()`

cssClasses
get `cssClasses()`
Adds speific ECL classes to the component. Returns : `string`

# results matching ""

# No results matching ""