BusyOverlayDirective

directive

A directive that will overlay its host component with a translucent background and a loading spinner once the condition resolves with true. This is useful for example to prevent user interaction while component data is loading or some processing is done.

It’ll also prevent the overlaid element from being interacted with.

Example :

<div class="data-panel" [yuvBusyOverlay]="isLoadingData">...</div>

Setting a yuvBusyError will replace the loading spinner by the provided error message. You need to keep the yuvBusyOverlay condition true to show the error. The error element rendered has a dismiss/close action that trigger the yuvBusyErrorDismiss output event, that you then can use to set the busy condition to false.

Example :

<div class="result-list"

[yuvBusyOverlay]="waitingForServerResponse"

(yuvBusyErrorDismiss)="waitingForServerResponse = false"

[yuvBusyError]="errorMessage">

...

</div>

Example :

// in your component code

this.waitingForServerResponse = true;

fetchData().subscribe({

next: (data) => {

 ...

this.waitingForServerResponse = false;

}

error: (err) => {

 this.errorMessage = 'Failed to load data from server: ' + err.message;

}

});

Directive Metadata

Selector: [yuvBusyOverlay]

Standalone: Yes

Implements: OnInit, OnDestroy

Inputs

yuvBusyError

Type: string

Error message to display in the overlay. If set, the loading spinner is replaced by the error message.

yuvBusyOverlay

Type: boolean

Default Value: false

The Boolean expression to evaluate as the condition for showing the busy overlay

yuvBusyOverlayConfig

Type: BusyOverlayConfig

Configuration options for the busy overlay. These include e.g. backdrops background color and whether to blur the overlaid content.

Outputs

yuvBusyErrorDismiss

Type: void

Event emitted when the error message’s dismiss action is triggered.

Properties

stylePosition

Type: unknown

Default Value: signal<string>(this.#initialStylePosition())