File

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

Metadata

Index

Methods
Inputs
Outputs

Inputs

entityType
Type : EntityConstructor<T>
Required :  true
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 { FaIconComponent } from "@fortawesome/angular-fontawesome";
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,
    FaIconComponent,
    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.required<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 factory = this.newRecordFactory();
    const newRecord = factory ? factory() : new (this.entityType())();
    this.entityCreate.emit(newRecord);
  }
}
<button
  mat-stroked-button
  color="accent"
  [class.standard-add-button]="!iconOnly()"
  [class.table-action-button]="iconOnly()"
  (click)="create()"
  angulartics2On="click"
  angularticsCategory="UserAction"
  [angularticsCategory]="entityType().ENTITY_TYPE"
  angularticsAction="list_add_entity"
  *appDisabledEntityOperation="{
    entity: entityType(),
    operation: 'create',
  }"
  matTooltip="Create a new {{ entityType().label }} record"
  i18n-matTooltip
>
  <fa-icon
    aria-label="add element"
    icon="plus-circle"
    [class.standard-icon-with-text]="!iconOnly()"
    [class.icon-only]="iconOnly()"
  ></fa-icon>
  @if (!iconOnly()) {
    <span i18n>Add New</span>
  }
</button>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""