File
|
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.
|
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 with directive