src/app/core/common-components/entity-field-view/entity-field-view.component.ts
Generic component to display one entity property field's viewComponent.
Dynamically extends field details from entity schema and loads the relevant, specific EditComponent implementation.
For editComponent form field, see EntityFieldEditComponent.
OnChanges
selector | app-entity-field-view |
imports |
DynamicComponentDirective
|
styleUrls | ./entity-field-view.component.scss |
templateUrl | ./entity-field-view.component.html |
Properties |
Inputs |
entity | |
Type : E
|
|
field | |
Type : ColumnConfig
|
|
field id or full config |
showLabel | |
Type : "inline" | "above" | "none"
|
|
Default value : "none"
|
|
_field |
Type : FormFieldConfig
|
full field config extended from schema (used internally and for template) |
import {
Component,
Input,
OnChanges,
SimpleChanges,
inject,
} from "@angular/core";
import { Entity } from "../../entity/model/entity";
import { DynamicComponentDirective } from "../../config/dynamic-components/dynamic-component.directive";
import { ColumnConfig, FormFieldConfig } from "../entity-form/FormConfig";
import { EntityFormService } from "../entity-form/entity-form.service";
/**
* Generic component to display one entity property field's viewComponent.
*
* Dynamically extends field details from entity schema and
* loads the relevant, specific EditComponent implementation.
*
* For editComponent form field, see EntityFieldEditComponent.
*/
@Component({
selector: "app-entity-field-view",
templateUrl: "./entity-field-view.component.html",
styleUrls: ["./entity-field-view.component.scss"],
imports: [DynamicComponentDirective],
})
export class EntityFieldViewComponent<E extends Entity = Entity>
implements OnChanges
{
private entityFormService = inject(EntityFormService);
@Input() entity: E;
/** field id or full config */
@Input() field: ColumnConfig;
/** full field config extended from schema (used internally and for template) */
_field: FormFieldConfig;
@Input() showLabel: "inline" | "above" | "none" = "none";
ngOnChanges(changes: SimpleChanges): void {
if (changes.field || changes.entity) {
this.updateField();
}
}
private updateField() {
if (!this.entity?.getConstructor()) {
this._field = undefined;
return;
}
this._field = this.entityFormService.extendFormFieldConfig(
this.field,
this.entity.getConstructor(),
);
}
}
@if (_field) {
<div>
@if (showLabel === "above") {
<div class="label">
{{ _field.label }}
</div>
} @else if (showLabel === "inline") {
<span>{{ _field.label }}: </span>
}
@if (_field.viewComponent) {
<ng-container
[appDynamicComponent]="{
component: _field.viewComponent,
config: {
value: entity[_field.id],
id: _field.id,
entity: entity,
config: _field.additional,
},
}"
></ng-container>
}
</div>
}
./entity-field-view.component.scss
@use "variables/colors";
.label {
font-size: 12px;
color: colors.$muted;
}