Actions component in Angular

Question

I have an action bar component. It helps do the CRUD operation for different component. Its only job is emit events. The emitted events are listened by the caller component. I am using a switch case logic to emit different events. An input is passed to this component as @Input() itemType: string, which holds the string as to which component called for action, to decide which event to emit. Another input @Input('actionMode') mode: string;, helps the component decide which HTML to display.

Here are the two files: Component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
 selector: 'app-actions',
 templateUrl: './actions.page.html',
 styleUrls: ['./actions.page.scss'],
})
export class ActionsPage implements OnInit {
 @Input('itemType') itemName: string;
 @Input('actionMode') mode: string;
 @Output() deleteSummary = new EventEmitter<void>();
 @Output() editSummary = new EventEmitter<void>();
 @Output() saveSummary = new EventEmitter<void>();
 @Output() cancelSummary = new EventEmitter<void>();
 @Output() editCompetency = new EventEmitter<void>();
 @Output() deleteCompetency = new EventEmitter<void>();
 @Output() saveCompetency = new EventEmitter<void>();
 @Output() cancelCompetency = new EventEmitter<void>();
 constructor() {}
 ngOnInit() {
 if (this.mode !== 'question' || 'answer') console.log('Incorrect mode in the action bar');
 }
 onDelete() {
 switch (this.itemName.toLowerCase()) {
 case 'summary':
 this.deleteSummary.emit();
 break;
 case 'competency':
 this.deleteCompetency.emit();
 break;
 default:
 }
 }
 onEdit() {
 switch (this.itemName.toLowerCase()) {
 case 'summary':
 this.editSummary.emit();
 break;
 case 'competency':
 this.editCompetency.emit();
 break;
 default:
 }
 }
 onSave() {
 switch (this.itemName.toLowerCase()) {
 case 'summary':
 this.saveSummary.emit();
 break;
 case 'competency':
 this.saveCompetency.emit();
 break;
 default:
 }
 }
 onCancel() {
 switch (this.itemName.toLowerCase()) {
 case 'summary':
 console.log('emitted Cancel');
 this.cancelSummary.emit();
 break;
 case 'competency':
 this.cancelCompetency.emit();
 break;
 default:
 }
 }
}

The HTML is the following: Component.html

<div *ngIf="mode === 'question'">
 <ion-buttons slot="end">
 <ion-button slot="end" size="small" color="secondary" (click)="onEdit()" routerDirection="forward">
 <ion-icon slot="icon-only" name="create-outline" fill="clear">Edit</ion-icon>
 </ion-button>
 <ion-button slot="end" size="small" color="danger" (click)="onDelete()">
 <ion-icon slot="icon-only" name="trash-outline" fill="clear">Delete</ion-icon>
 </ion-button>
 </ion-buttons>
</div>
<div *ngIf="mode === 'answer'">
 <ion-button (click)="onSave()" type="button" color="primary">
 <ion-icon slot="start" name="save"></ion-icon>
 Save
 </ion-button>
 <ion-button (click)="onCancel()" color="warning" type="button">
 <ion-icon slot="start" name="close-outline"></ion-icon>
 Cancel
 </ion-button>
</div>

Is this a good way to do it ? Although very readable, but seems to me kind of tedious, especially when the number of components grow.

Can I use TypeScript Generics in this case?