New to Kendo UI for Angular? Start a free 30-day trial

Template-Driven Forms

Updated on Sep 10, 2026

The ListView provides options for editing its data by using the Template-Driven Angular Forms.

Basic Concepts

To implement the editing mode of the Kendo UI ListView for Angular in Template-Driven Forms, define the EditTemplateDirective for the ListView items.

Loading ...

Setup

The editing of the ListView in template-driven forms is based on the item index. As a result, the Template Forms immediately update the value.

To enable the editing mode of the ListView in Template-Driven Forms:

Wrap the component in a form.

html

<form novalidate #myForm="ngForm">
    <kendo-listview>
        <!-- Add the remaining ListView configuration here. -->
    </kendo-listview>
</form>

Pass an editing template.

html

<kendo-listview>
    <ng-template kendoListViewEditTemplate let-dataItem="dataItem">
        <input [(ngModel)]="dataItem.ProductName" name="ProductName" class="k-textbox" required/>
    </ng-template>
</kendo-listview>

Configure the commands. You need to define the command buttons inside the editing template.

html

<kendo-listview>
    <ng-template kendoListViewEditTemplate let-dataItem="dataItem" let-isNew="isNew">
        <input [(ngModel)]="dataItem.ProductName" name="ProductName" class="k-textbox" required/>
        <button kendoListViewSaveCommand>{{ isNew ? 'Add' : 'Update' }}</button>
        <button kendoListViewCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
    </ng-template>
</kendo-listview>

Attach handlers for CRUD data operations.

When the user clicks a command button, the ListView will emit the corresponding event. To instruct the component what action to perform, handle the event that is emitted.

html

<kendo-listview
  [data]="view | async"
  (add)="addHandler($event)"
  (edit)="editHandler($event)"
  (save)="saveHandler($event)" 
  (cancel)="cancelHandler($event)"
  (remove)="removeHandler($event)"
>
<!-- Add the remaining ListView configuration here. -->
</kendo-listview>

Toggling the Edit State

Inside the corresponding event handlers, you can toggle the edit state of the ListView by using the following events:

edit
add
cancel
save
remove

Editing Records

The edit event fires when the kendoListViewEditCommand is clicked. Inside the event handler, you can toggle the editing mode of the item by calling the editItem method.

public editHandler({sender, itemIndex, dataItem}) {
    // Close the previously edited item.
    this.closeEditor(sender);

    // Track the most recently edited item.
    // It will be used in `closeEditor` for closing the previously edited item.
    this.editedItemIndex = itemIndex;

    // Clone the current - `[(ngModel)]` will modify the original item.
    // Use this copy to revert changes.
    this.editedProduct = Object.assign({}, dataItem);

    // Edit the item.
    sender.editItem(itemIndex);
}

Adding Records

The add event fires when the kendoListViewAddCommand is clicked. Inside the event handler, you can show the new item editor by calling the addItem method.

public addHandler({sender}) {
    // Close the previously edited item.
    this.closeEditor(sender);

    // Open a new item editor.
    sender.addItem(new Product());
}

Cancelling Editing

The cancel event fires when the kendoListViewCancelCommand is clicked. Inside the event handler, you can switch the item back to the view mode by calling the closeItem method.

public cancelHandler({sender, itemIndex}) {
    // Close the item editor and restore the previous state.
    this.closeEditor(sender, itemIndex);
}

private closeEditor(listview, itemIndex = this.editedItemIndex) {
    // Close the editor before restoring the original data.
    listview.closeItem(itemIndex);

    // Revert the data item to the original state.
    this.editService.resetItem(this.editedProduct, itemIndex);

    // Clear the edited item state after closing the editor.
    this.editedItemIndex = undefined;
    this.editedProduct = undefined;
}

Saving Records

The save event fires when the kendoListViewSaveCommand is clicked.

public saveHandler({sender, itemIndex, dataItem, isNew}) {
    // Update the data source.
    this.editService.save(dataItem, isNew);

    // Close the editor after saving the item.
    sender.closeItem(itemIndex);
}

Removing Records

The remove event fires when the kendoListViewRemoveCommand is clicked. Inside the event handler, you can issue a request to remove the current data item from the data source.

public removeHandler({dataItem}) {
    // Remove the current data item through the service that owns the data source.
    this.editService.remove(dataItem);
}