widgets/implementations/image/image-widget-view/image-widget-view.component.ts
OnChanges
selector | c8y-image-widget-view |
standalone | true |
imports |
NgIf
NgClass
AsyncPipe
NgStyle
LoadingComponent
EmptyStateComponent
|
templateUrl | ./image-widget-view.component.html |
Properties |
Methods |
Inputs |
constructor(imageWidget: ImageWidgetService)
|
||||||
Parameters :
|
config |
Type : ImageWidgetConfig
|
ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
Parameters :
Returns :
void
|
imageBinaryId$ |
Default value : new BehaviorSubject<string>(null)
|
imageDetails$ |
Type : Observable<literal type>
|
loading |
Default value : true
|
styling |
Type : ImageWidgetStyle | null
|
<ng-container *ngIf="imageDetails$ | async as details; else empty">
<img
[src]="details.base64"
[title]="details.file.name"
[ngClass]="styling ? 'fit-h fit-w' : 'img-responsive'"
[ngStyle]="styling"
/>
</ng-container>
<ng-template #empty>
<div class="d-flex fit-h fit-w j-c-center a-i-center" *ngIf="!loading">
<c8y-ui-empty-state
class="fit-w"
[icon]="'no-image'"
[title]="'No image to display.' | translate"
[subtitle]="'Upload an image.' | translate"
[horizontal]="true"
></c8y-ui-empty-state>
</div>
</ng-template>
<div class="d-flex fit-h fit-w j-c-center a-i-center" *ngIf="loading">
<c8y-loading></c8y-loading>
</div>