import { Component, Input } from '@angular/core';
import { LocalizeFn } from '@angular/localize/init';
import { ExtendedDisplayMessage } from '@allianz/ngx-pfe';
declare let $localize: LocalizeFn;
@Component({
selector: 'taly-spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.scss'],
standalone: false
})
export class SpinnerComponent {
@Input()
set label(label: ExtendedDisplayMessage | null | undefined) {
this._label = {
headline: label?.headline || $localize`:@@frame.spinner-label:Loading...`,
subline: label?.subline
};
}
get headline(): string {
return this._label.headline;
}
get subline(): string | undefined {
return this._label?.subline;
}
private _label!: ExtendedDisplayMessage;
}
<div class="spinner-container">
<nx-spinner size="large" data-testid="nx-spinner"></nx-spinner>
<p
nxHeadline="subsection-xsmall"
class="nx-margin-top-s nx-margin-bottom-0 nx-font-weight-regular"
data-testid="spinner-headline"
>
{{ headline }}
</p>
<p
nxCopytext
class="nx-margin-top-2xs nx-margin-bottom-0 spinner-subline"
data-testid="spinner-subline"
*ngIf="subline"
>
{{ subline }}
</p>
</div>
:host {
background: rgba(0, 0, 0, 0.35);
}
.spinner-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 344px;
margin: auto;
padding: 40px;
border-radius: var(--card-border-radius);
background: var(--modal-background-color);
box-shadow: var(--shadow-large);
text-align: center;
}
.spinner-subline {
color: var(--ui-05);
}
Legend
Html element with directive