@rxap/directives/docs/wiki/Class.BackgroundImageDirective.md

This package provides a set of Angular directives to simplify common tasks such as setting background images, confirming clicks, making elements contenteditable, and more. It includes directives for handling UI interactions, applying styles, and managing

[@rxap/directives](../wiki/globals) / BackgroundImageDirective

# Class: BackgroundImageDirective

Defined in: [background-image.directive.ts:56](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/directives/src/lib/background-image.directive.ts#L56)

## Extended by

- [`AvatarBackgroundImageDirective`](../wiki/Class.AvatarBackgroundImageDirective)

## Implements

- `OnChanges`
- `OnInit`

## Constructors

### new BackgroundImageDirective()

> **new BackgroundImageDirective**(`host`, `renderer`, `imageLoader`): [`BackgroundImageDirective`](../wiki/Class.BackgroundImageDirective)

Defined in: [background-image.directive.ts:74](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/directives/src/lib/background-image.directive.ts#L74)

#### Parameters

##### host

`ElementRef`

##### renderer

`Renderer2`

##### imageLoader

`ImageLoaderService`

#### Returns

[`BackgroundImageDirective`](../wiki/Class.BackgroundImageDirective)

## Properties

### imageUrl

> **imageUrl**: `undefined` \| `null` \| `string` = `null`

Defined in: [background-image.directive.ts:58](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/directives/src/lib/background-image.directive.ts#L58)

***

### placeholderImageUrl

> **placeholderImageUrl**: `string`

Defined in: [background-image.directive.ts:61](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/directives/src/lib/background-image.directive.ts#L61)

***

### position?

> `optional` **position**: `string`

Defined in: [background-image.directive.ts:70](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/directives/src/lib/background-image.directive.ts#L70)

***

### repeat?

> `optional` **repeat**: [`BackgroundRepeat`](../wiki/TypeAlias.BackgroundRepeat)

Defined in: [background-image.directive.ts:67](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/directives/src/lib/background-image.directive.ts#L67)

***

### size?

> `optional` **size**: `string`

Defined in: [background-image.directive.ts:64](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/directives/src/lib/background-image.directive.ts#L64)

## Methods

### ngOnChanges()

> **ngOnChanges**(`changes`): `void`

Defined in: [background-image.directive.ts:96](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/directives/src/lib/background-image.directive.ts#L96)

A callback method that is invoked immediately after the
default change detector has checked data-bound properties
if at least one has changed, and before the view and content
children are checked.

#### Parameters

##### changes

`SimpleChanges`

The changed properties.

#### Returns

`void`

#### Implementation of

`OnChanges.ngOnChanges`

***

### ngOnInit()

> **ngOnInit**(): `void`

Defined in: [background-image.directive.ts:84](https://gitlab.com/rxap/packages/-/blob/36b0e9732b24717840935712e316593ff6aba795/packages/angular/directives/src/lib/background-image.directive.ts#L84)

A callback method that is invoked immediately after the
default change detector has checked the directive's
data-bound properties for the first time,
and before any of the view or content children have been checked.
It is invoked only once when the directive is instantiated.

#### Returns

`void`

#### Implementation of

`OnInit.ngOnInit`