File

src/app/core/common-components/entity-field-view/entity-field-view.component.ts

Description

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.

Implements

OnChanges

Metadata

Index

Properties
Inputs

Constructor

constructor(entityFormService: EntityFormService)
Parameters :
Name Type Optional
entityFormService EntityFormService No

Inputs

entity
Type : E
field
Type : ColumnConfig

field id or full config

showLabel
Type : "inline" | "above" | "none"
Default value : "none"

Properties

_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 }}:&nbsp;</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;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""