Actions component in Angular

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?