src/app/core/entity/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 {
  ColumnConfig,
  FormFieldConfig,
} from "../../common-components/entity-form/FormConfig";
import { EntityFormService } from "../../common-components/entity-form/entity-form.service";
import { DynamicComponentDirective } from "../../config/dynamic-components/dynamic-component.directive";
import { Entity } from "../model/entity";
/**
 * 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,
            formFieldConfig: _field,
          },
        }"
      ></ng-container>
    }
  </div>
}
    
                    ./entity-field-view.component.scss
                
@use "variables/colors";
.label {
  font-size: 12px;
  color: colors.$muted;
}