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 |
NgIf
DynamicComponentDirective
|
styleUrls | ./entity-field-view.component.scss |
templateUrl | ./entity-field-view.component.html |
Properties |
Inputs |
constructor(entityFormService: EntityFormService)
|
||||||
Parameters :
|
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 } from "@angular/core";
import { Entity } from "../../entity/model/entity";
import { NgIf } from "@angular/common";
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: [NgIf, DynamicComponentDirective],
})
export class EntityFieldViewComponent<E extends Entity = Entity>
implements OnChanges
{
@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";
constructor(private entityFormService: EntityFormService) {}
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(),
);
}
}
<div *ngIf="_field">
<div *ngIf="showLabel === 'above'" class="label">
{{ _field.label }}
</div>
<span *ngIf="showLabel === 'inline'">{{ _field.label }}: </span>
<ng-container
*ngIf="_field.viewComponent"
[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;
}