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

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

results matching ""

    No results matching ""