Deleting a Person

Application Service

Let's add a DeletePerson method to the server side. We are adding it to the service interface, IPersonAppService::

Task DeletePerson(EntityDto input);

EntityDto is a shortcut of ABP if we only get an id value. Implementation (in PersonAppService) is very simple:

public async Task DeletePerson(EntityDto input)
    await _personRepository.DeleteAsync(input.Id);

Service Proxy Generation

Since we changed server side services, we should re-generate the client-side service proxies via NSwag. Make server side running and userefresh.bat as we did before.

Component Script

Go to phonebook.component.ts and add delete option to CustomStore:

import {Component, Injector} from '@angular/core';
import {AppComponentBase} from '@shared/common/app-component-base';
import {appModuleAnimation} from '@shared/animations/routerTransition';
import {EditPersonInput, PersonServiceProxy} from "@shared/service-proxies/service-proxies";
import CustomStore from "@node_modules/devextreme/data/custom_store";

    templateUrl: './phonebook.component.html',
    animations: [appModuleAnimation()]

export class PhoneBookComponent extends AppComponentBase {

    dataSource: any;
    refreshMode: string;

        injector: Injector,
        private _personService: PersonServiceProxy
    ) {

    init() {
        this.refreshMode = "full";

        this.dataSource = new CustomStore({
            key: "id",
            load: (loadOptions) => {
                return this._personService.getPeople("").toPromise();
            insert: (values) => {
                return this._personService.createPerson(values).toPromise()
            remove: (key) => {
                return this._personService.deletePerson(key).toPromise();

Go to phonebook.component.html and add dxo-editing tag with allowDeleting true option:

<div [@routerTransition]>
    <div class="content d-flex flex-column flex-column-fluid">
        <sub-header [title]="'PhoneBook' | localize">

        <div [class]="containerClass">
            <div class="card card-custom">
                <div class="card-body">

                        <dxo-scrolling mode="virtual"></dxo-scrolling>

                        <dxi-column dataField="name" caption="{{'Name' | localize}}"></dxi-column>
                        <dxi-column dataField="surname" caption="{{'Surname' | localize}}"></dxi-column>
                        <dxi-column dataField="emailAddress" caption="{{'EmailAddress' | localize}}"></dxi-column>

It first shows a confirmation message when we click the delete button:

Confirmation message Confirmation message


In this document