File

src/app/core/common-components/entity-create-button/entity-create-button.component.ts

Metadata

Index

Methods
Inputs
Outputs

Inputs

entityType
Type : EntityConstructor<T>
iconOnly
Type : boolean
Default value : false

Whether only an icon button without text should be displayed.

newRecordFactory
Type : () => T

Optional factory method to create a new entity instance with some default values.

Outputs

entityCreate
Type : T

Emits a new entity instance when the user clicks the button.

Methods

create
create()
Returns : void
import {
  Component,
  input,
  output,
  ChangeDetectionStrategy,
} from "@angular/core";
import { DisableEntityOperationDirective } from "../../permissions/permission-directive/disable-entity-operation.directive";
import { FaDynamicIconComponent } from "../fa-dynamic-icon/fa-dynamic-icon.component";
import { MatButtonModule } from "@angular/material/button";
import { MatTableModule } from "@angular/material/table";
import { Entity, EntityConstructor } from "../../entity/model/entity";
import { Angulartics2OnModule } from "angulartics2";
import { MatTooltipModule } from "@angular/material/tooltip";

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "app-entity-create-button",
  imports: [
    DisableEntityOperationDirective,
    FaDynamicIconComponent,
    MatButtonModule,
    MatTableModule,
    Angulartics2OnModule,
    MatTooltipModule,
  ],
  templateUrl: "./entity-create-button.component.html",
  styleUrl: "./entity-create-button.component.scss",
})
export class EntityCreateButtonComponent<T extends Entity = Entity> {
  entityType = input<EntityConstructor<T>>();

  /** Optional factory method to create a new entity instance with some default values. */
  newRecordFactory = input<() => T>();

  /** Emits a new entity instance when the user clicks the button. */
  entityCreate = output<T>();

  /** Whether only an icon button without text should be displayed. */
  iconOnly = input<boolean>(false);

  create() {
    const entityType = this.entityType();
    if (!entityType) {
      return;
    }

    const factory = this.newRecordFactory();
    const newRecord = factory ? factory() : new entityType();
    this.entityCreate.emit(newRecord);
  }
}
@if (entityType(); as entityType) {
  <button
    mat-stroked-button
    color="accent"
    [class.standard-add-button]="!iconOnly()"
    [class.table-action-button]="iconOnly()"
    (click)="create()"
    angulartics2On="click"
    angularticsCategory="UserAction"
    angularticsAction="list_add_entity"
    *appDisabledEntityOperation="{
      entity: entityType,
      operation: 'create',
    }"
    matTooltip="Create a new {{ entityType.label }} record"
    i18n-matTooltip
  >
    <app-fa-dynamic-icon
      aria-label="add element"
      i18n-aria-label
      icon="plus-circle"
      [class.standard-icon-with-text]="!iconOnly()"
      [class.icon-only]="iconOnly()"
    ></app-fa-dynamic-icon>
    @if (!iconOnly()) {
      <span i18n>Add New</span>
    }
  </button>
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""