Skip to content
Snippets Groups Projects
Commit 7f12879f authored by jojohoch's avatar jojohoch
Browse files

Refactor button component

- Replace onClick method with an event emitter inside the template
parent d3badd16
No related branches found
No related tags found
No related merge requests found
...@@ -19,14 +19,14 @@ import { ButtonElement } from './button-element'; ...@@ -19,14 +19,14 @@ import { ButtonElement } from './button-element';
[style.font-style]="elementModel.fontProps.italic ? 'italic' : ''" [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
[style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''" [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
[style.border-radius.px]="elementModel.borderRadius" [style.border-radius.px]="elementModel.borderRadius"
(click)="onClick($event, elementModel.action)"> (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
{{elementModel.label}} {{elementModel.label}}
</button> </button>
<input *ngIf="elementModel.imageSrc" type="image" <input *ngIf="elementModel.imageSrc" type="image"
[src]="elementModel.imageSrc | safeResourceUrl" [src]="elementModel.imageSrc | safeResourceUrl"
[class]="elementModel.positionProps.dynamicPositioning ? 'dynamic-image' : 'static-image'" [class]="elementModel.positionProps.dynamicPositioning ? 'dynamic-image' : 'static-image'"
[alt]="'imageNotFound' | translate" [alt]="'imageNotFound' | translate"
(click)="onClick($event, elementModel.action)"> (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
`, `,
styles: [ styles: [
'.dynamic-image {width: 100%; height: fit-content}', '.dynamic-image {width: 100%; height: fit-content}',
...@@ -36,10 +36,4 @@ import { ButtonElement } from './button-element'; ...@@ -36,10 +36,4 @@ import { ButtonElement } from './button-element';
export class ButtonComponent extends ElementComponent { export class ButtonComponent extends ElementComponent {
@Input() elementModel!: ButtonElement; @Input() elementModel!: ButtonElement;
@Output() navigationRequested = new EventEmitter<'previous' | 'next' | 'first' | 'last' | 'end'>(); @Output() navigationRequested = new EventEmitter<'previous' | 'next' | 'first' | 'last' | 'end'>();
onClick = (event: MouseEvent, action: 'previous' | 'next' | 'first' | 'last' | 'end' | null): void => {
if (action) { // TODO warum kann das null sein?
this.navigationRequested.emit(action);
}
};
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment