javascript – JS, a multi purpose function

this is an Angular application, this page will have a list and sublist with action for each one (add/edit/delete)
enter image description here
the buttons (add/edit) will show a popup with the same form except the landmark will show one more filed.

<ng-template #modaleTemplate>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body text-center">
    <div class="d-flex justify-content-center">
      <div class="w-50">
        <input
        class="form-control shadow-sm bg-white rounded"
        ((ngModel))="areaModel.name"
        placeholder="{{ 'Name' | translate }}"
      />
      </div>
      <div class="w-50" *ngIf="showTypes">
        <select-menu
        (label)="'landmarkType'"
        (itemKey)="'Id'"
        (dropDownListInputs)="landmarkTypeList"
        (SearchVAlue)="getLandmarkType($event)"
        (selectedListChange)="onLandmarTypekDDLChanged($event)"
        (options)="selectMenuOptions"
      ></select-menu>
      </div>
    </div>




    <div class="pt-5">
      <tabset>
        <tab heading="Location" class="py-3" id="tab1">
          <input
            class="w-100 d-inline-block form-control shadow-sm bg-white rounded"
            ((ngModel))="areaModel.location"
            placeholder="{{ 'Name' | translate }}"
          />
        </tab>
        <tab heading="MoreDetails" class="py-3">
          <div class="row">
            <div class="col-12">
              <div class="form-group">
                <label for="description">{{"Description" | translate}}</label>
                <input type="text" class="form-control shadow-sm bg-white rounded" ((ngModel))="areaModel.description" placeholder="{{ 'Description' | translate }}" id="description">
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label for="telephone1">{{"Telephone #1" | translate}}</label>
                <input type="text" class="form-control shadow-sm bg-white rounded" ((ngModel))="areaModel.telephone1" placeholder="{{ 'Telephone #1' | translate }}" id="telephone1">
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label for="telephone2">{{"Telephone #2" | translate}}</label>
                <input type="text" class="form-control shadow-sm bg-white rounded" ((ngModel))="areaModel.telephone2" placeholder="{{ 'Telephone #2' | translate }}" id="telephone2">
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label for="Mobile">{{"Mobile" | translate}}</label>
                <input type="text" class="form-control shadow-sm bg-white rounded" ((ngModel))="areaModel.mobile" placeholder="{{ 'Mobile' | translate }}" id="Mobile">
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label for="Fax">{{"Fax" | translate}}</label>
                <input type="text" class="form-control shadow-sm bg-white rounded" ((ngModel))="areaModel.fax" placeholder="{{ 'Fax' | translate }}" id="Fax">
              </div>
            </div>
            <div class="col-6">
              <div class="form-group">
                <label for="Website">{{"Website" | translate}}</label>
                <input type="text" class="form-control shadow-sm bg-white rounded" ((ngModel))="areaModel.website" placeholder="{{ 'Website' | translate }}" id="Website">
              </div>
            </div>
            <div class="col-6">
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" ((ngModel))="areaModel.isLive" id="isLive">
                <label class="custom-control-label" for="isLive">{{ "IsLive" | translate }}</label>
              </div>
            </div>
          </div>
        </tab>
      </tabset>
    </div>
  </div>
  <div class="d-flex p-3 justify-content-end">
    <button type="button" class="btn btn-link" (click)="modalRef.hide()">cancel</button>
    <button type="button" class="btn btn-primary" (click)="save()">save</button>
  </div>
</ng-template>


<div class="branch-management container-fluid">
  <div class="row">
    <div class="col-12">
      <span class="actions d-flex justify-content-end mb-3">
        <a class="add-btn" (click)="showModal(modaleTemplate, {name: 'area', action: 'add'})">
          <i class="fas fa-plus"></i>
          addArea
        </a>
      </span>

      <div class="level-areas" id="areas">
        <div class="item d-flex justify-content-between align-items-center">

          <div class="btn btn-link collapsed"
            data-toggle="collapse"
            data-target="#area-1">
            <div class="btn btn-link icon">
              <i class="fas fa-plus"></i>
              <i class="fas fa-minus"></i>
            </div>
            Area title
          </div>
          <span class="actions">
            <a class="add-btn" (click)="showModal(modaleTemplate, {name: 'city', action: 'add', id: 1})">
              <i class="fas fa-plus"></i>
              addCity
            </a>
            <a class="edit-btn" (click)="showModal(modaleTemplate, {name: 'area', action: 'edit', id: 1})">
              <i class="fas fa-pen"></i>
              edit
            </a>
            <a class="delete-btn" (click)="delete({name: 'area', id: 1})">
              <i class="fas fa-trash-alt"></i>
              delete
            </a>
          </span>
        </div>


        <div id="area-1" class="collapse" data-parent="#areas">
          <div class="level-cities" id="cities">

            <div class="item d-flex justify-content-between align-items-center">

              <div class="btn btn-link collapsed"
                data-toggle="collapse"
                data-target="#city-2">
                <div class="btn btn-link icon">
                  <i class="fas fa-plus"></i>
                  <i class="fas fa-minus"></i>
                </div>
                City title
              </div>
              <span class="actions">
                <a class="add-btn" (click)="showModal(modaleTemplate, {name: 'landmark', action: 'add', id: 1})">
                  <i class="fas fa-plus"></i>
                  addLandmark
                </a>
                <a class="edit-btn" (click)="showModal(modaleTemplate, {name: 'city', action: 'edit', id: 1})">
                  <i class="fas fa-pen"></i>
                  edit
                </a>
                <a class="delete-btn" (click)="delete({name: 'city', id: 1})">
                  <i class="fas fa-trash-alt"></i>
                  delete
                </a>
              </span>
            </div>
            <div id="city-2" class="collapse" data-parent="#cities">
              <div class="level-landmarks">
                <ul>
                  <li class="item d-flex justify-content-between align-items-center">
                    landmark name
                    <span class="actions">

                      <a class="edit-btn" (click)="showModal(modaleTemplate, {name: 'landmark', action: 'edit', id: 1})">
                        <i class="fas fa-pen"></i>
                        edit
                      </a>
                      <a class="delete-btn" (click)="delete({name: 'landmark', id: 1})">
                        <i class="fas fa-trash-alt"></i>
                        delete
                      </a>
                    </span>
                  </li>
                </ul>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

</div>
</div>

So, instead of creating a function for every action for each element and repeat the modal template I’ve created two functions and passed parameters to tell the function to show the modal as needed.
enter image description here
Also, on the modal save button it fires a save() method, which is will execute a method depends on what has passed on show modal function.

Then, I’ve checked the income action by swich statment to call its service.

modalRef: BsModalRef;
showTypes = false;
areaModel: AreaModel = new AreaModel();
  action = {
    action: string,
    name: string,
    id: string
  };
  showModal(template: TemplateRef<any>, props: any) {
    console.log(props);
    this.action = props;
    if(props.action === "edit") {
      switch (props.name) {
        case 'area':
          console.log(props.action, props.name);
          this.cpService.getAreaById(props.id).subscribe(res => this.areaModel = res.Value);
          break;
        case 'city':
          console.log(props.action, props.name);
          this.cpService.getCityById(props.id).subscribe(res => this.areaModel = res.Value);
          break;
        case 'landmark':
          console.log(props.action, props.name);
          this.cpService.getLandmarkById(props.id).subscribe(res => this.areaModel = res.Value);
          break;
      }
    }

    if(props.name === "landmark") {
      this.showTypes = true;
    } else {
      this.showTypes = false;
    }

    this.modalRef = this.modalService.show(
      template,
      Object.assign({}, { class: 'modal-lg' })
    );
  }



  delete(name, id) {

    switch (name) {
      case 'area':
        this.cpService.deleteArea(id).subscribe(res => console.log(res))
        break;
      case 'city':
        this.cpService.deleteCity(id).subscribe(res => console.log(res))
        break;
      case 'landmark':
        this.cpService.deleteLandmark(id).subscribe(res => console.log(res))
        break;
    }
  }


  save() {
    const currentAction = this.action.action as any;
    switch (this.action.name as any) {
      case 'area':
        if (currentAction === 'edit') {
          this.cpService.editArea(this.areaModel).subscribe(res => console.log(res));
        } else {
          this.cpService.addArea(this.areaModel).subscribe(res => console.log(res));
        }
        break;
      case 'city':
        if (currentAction === 'edit') {
          this.cpService.editCity(this.areaModel).subscribe(res => console.log(res));
        } else {
          this.cpService.addCity(this.areaModel).subscribe(res => console.log(res));
        }
        break;
      case 'landmark':
        if (currentAction === 'edit') {
          this.cpService.editLandmark(this.areaModel).subscribe(res => console.log(res));
        } else {
          this.cpService.addLandmark(this.areaModel).subscribe(res => console.log(res));
        }
        break;
    }
  }

Is that a good practice, or there is another good options to do that?