{"id":18573,"date":"2024-10-25T15:39:30","date_gmt":"2024-10-25T10:09:30","guid":{"rendered":"https:\/\/www.softsuave.com\/blog\/?p=18573"},"modified":"2025-10-30T15:02:26","modified_gmt":"2025-10-30T09:32:26","slug":"how-to-remove-an-item-in-grid-in-angular","status":"publish","type":"post","link":"https:\/\/www.softsuave.com\/blog\/how-to-remove-an-item-in-grid-in-angular\/","title":{"rendered":"How to Remove an Item in Grid in Angular: A Complete Guide"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-flat ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.softsuave.com\/blog\/how-to-remove-an-item-in-grid-in-angular\/#Setting_Up_the_Angular_Grid_Component\" >Setting Up the Angular Grid Component<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.softsuave.com\/blog\/how-to-remove-an-item-in-grid-in-angular\/#HTML_Template_gridcomponenthtml\" >HTML Template (grid.component.html)<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.softsuave.com\/blog\/how-to-remove-an-item-in-grid-in-angular\/#Defining_the_Data_and_Methods_in_Your_Component\" >Defining the Data and Methods in Your Component<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.softsuave.com\/blog\/how-to-remove-an-item-in-grid-in-angular\/#TypeScript_gridcomponentts\" >TypeScript (grid.component.ts)<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.softsuave.com\/blog\/how-to-remove-an-item-in-grid-in-angular\/#Ensuring_Angular_Change_Detection\" >Ensuring Angular Change Detection<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.softsuave.com\/blog\/how-to-remove-an-item-in-grid-in-angular\/#Adding_Confirmation_Before_Removal_Optional\" >Adding Confirmation Before Removal (Optional)<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.softsuave.com\/blog\/how-to-remove-an-item-in-grid-in-angular\/#HTML_Template_Update_gridcomponenthtml\" >HTML Template Update (grid.component.html)<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.softsuave.com\/blog\/how-to-remove-an-item-in-grid-in-angular\/#Removing_an_Item_with_Confirmation_Code_Walkthrough\" >Removing an Item with Confirmation (Code Walkthrough)<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.softsuave.com\/blog\/how-to-remove-an-item-in-grid-in-angular\/#TypeScript_gridcomponentts-2\" >TypeScript (grid.component.ts)<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.softsuave.com\/blog\/how-to-remove-an-item-in-grid-in-angular\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n\n<div class=\"wp-block-columns has-border-color is-layout-flex wp-container-core-columns-is-layout-29cf1a26 wp-block-columns-is-layout-flex\" style=\"border-color:#ff0042;border-width:3px;margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20);padding-top:0;padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:var(--wp--preset--spacing--20)\">\n<div class=\"wp-block-column blog_overview has-border-color has-ast-global-color-5-border-color has-ast-global-color-6-background-color has-background is-layout-flow wp-container-core-column-is-layout-334757f1 wp-block-column-is-layout-flow\" style=\"border-width:12px;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\">\n<p><strong>Overview-<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This blog covers <strong>how to remove an item in grid in Angular<\/strong> using step-by-step instructions<\/li>\n\n\n\n<li>It shows you how to set up an Angular grid, remove items as needed, and add confirmation pop-ups to keep users safe.<\/li>\n\n\n\n<li>Also learn how to handle complex data and use Angular&#8217;s change detection to make sure your grid works smoothly<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0806ab5c wp-block-columns-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:90%\">\n<p>Girds are required to display tabular data in an organized and user-friendly way in most Angular applications. Managing the items dynamically within these grids is a common requirement. This blog will guide you through <strong>how to remove an item in grid in Angular<\/strong>, using an Angular Material table <strong>(MatTable)<\/strong> or similar components. You can<a href=\"https:\/\/www.softsuave.com\/hire-angularjs-developers\"> <strong>hire dedicated angular developers<\/strong><\/a> and greatly benefit your project by providing expertise in implementing efficient data management, user-friendly interactions, and scalable web applications.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-setting-up-the-angular-grid-component\" style=\"text-transform:none\"><span class=\"ez-toc-section\" id=\"Setting_Up_the_Angular_Grid_Component\"><\/span>Setting Up the Angular Grid Component<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before learning <strong>how to remove an item in grid in Angular<\/strong>, it\u2019s crucial to understand how to set up the grid component. First, initialize your Angular project and set up the grid, which can use Angular Material\u2019s MatTable or a simple HTML table. The structure contains three key columns: <strong>ID<\/strong>, <strong>Employee Name<\/strong>, and <strong>Role<\/strong>, each with a &#8220;Remove&#8221; button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-html-template-grid-component-html\" style=\"text-transform:none\"><span class=\"ez-toc-section\" id=\"HTML_Template_gridcomponenthtml\"><\/span>HTML Template (grid.component.html)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table mat-table &#91;dataSource]=\"dataSource\" class=\"mat-class\"&gt;\n  &lt;ng-container matColumnDef=\"id\"&gt;\n    &lt;th mat-header-cell *matHeaderCellDef&gt; ID &lt;\/th&gt;\n    &lt;td mat-cell *matCellDef=\"let DataList\"&gt; {{DataList.id}} &lt;\/td&gt;\n  &lt;\/ng-container&gt;\n  &lt;ng-container matColumnDef=\"name\"&gt;\n    &lt;th mat-header-cell *matHeaderCellDef&gt; Employee Name &lt;\/th&gt;\n    &lt;td mat-cell *matCellDef=\"let DataList\"&gt; {{DataList.name}} &lt;\/td&gt;\n  &lt;\/ng-container&gt;\n  &lt;ng-container matColumnDef=\"action\"&gt;\n    &lt;th mat-header-cell *matHeaderCellDef&gt; Role&lt;\/th&gt;\n    &lt;td mat-cell *matCellDef=\"let DataList\"&gt;\n      &lt;button mat-button (click)=\"removeItem(DataList.id)\"&gt;Remove&lt;\/button&gt;\n    &lt;\/td&gt;\n  &lt;\/ng-container&gt;\n  &lt;tr mat-header-row *matHeaderRowDef=\"displayedColumns\"&gt;&lt;\/tr&gt;\n  &lt;tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"&gt;&lt;\/tr&gt;\n&lt;\/table&gt;\n<\/code><\/pre>\n\n\n\n<p>Users can interact and remove items dynamically from the grid as this layout creates a user-friendly interface.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-defining-the-data-and-methods-in-your-component\"><span class=\"ez-toc-section\" id=\"Defining_the_Data_and_Methods_in_Your_Component\"><\/span>Defining the Data and Methods in Your Component<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>After setting up the grid, the next step is to define the data and the method for item removal in the component class. In Angular, data binding ensures smooth communication between the component and the template.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-typescript-grid-component-ts\"><span class=\"ez-toc-section\" id=\"TypeScript_gridcomponentts\"><\/span>TypeScript (grid.component.ts)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component } from '@angular\/core';\n\n@Component({\n  selector: 'app-grid',\n  templateUrl: '.\/grid.component.html',\n  styleUrls: &#91;'.\/grid.component.css'],\n})\nexport class GridComponent {\n  \/\/ Sample data for the grid\n  dataSource = &#91;\n    { id: 331, name: 'Employee 1' },\n    { id: 332, name: 'Employee 2' },\n    { id: 333, name: 'Employee 3' },\n  ];\ndisplayedColumns: string&#91;] = &#91;'id', 'name', 'role'];\n \/\/ Method to remove an item from the grid\n  removeItem(id: number) {\n    const indx = this.dataSource.findIndex((item) =&gt; item.id === id);\n    if (indx &gt;= 0) {\n      this.dataSource.splice(indx, 1);  \/\/ Remove item from array\n      this.dataSource = &#91;...this.dataSource]; \/\/ Re-assign to trigger change detection\n    }\n  }\n}\n<\/code><\/pre>\n\n\n\n<p><strong>In this code:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Data Source Array<\/strong>: Holds the grid&#8217;s data, where each object contains id and name.<\/li>\n\n\n\n<li><strong>Displayed Columns<\/strong>: Defines which columns to display.<\/li>\n\n\n\n<li><strong>Remove Item<\/strong>: Removes an item when a user clicks &#8220;Remove&#8221;.<\/li>\n<\/ul>\n\n\n\n<p>If you ever encounter module loading issues, such as with <strong>Angular\u2019s Full-calendar module<\/strong>, this approach ensures that the removal process is handled efficiently.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-ensuring-angular-change-detection\"><span class=\"ez-toc-section\" id=\"Ensuring_Angular_Change_Detection\"><\/span>Ensuring Angular Change Detection<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>One important aspect of removing items in Angular is ensuring that the framework detects changes in the <strong>dataSource<\/strong>. This is achieved by reassigning the <strong>dataSource<\/strong> to a new array after an item is removed.<\/p>\n\n\n\n<p><strong>this.dataSource = [&#8230;this.dataSource];<\/strong><\/p>\n\n\n\n<p>By doing this, Angular detects the changes and updates the grid in real time. This technique ensures your app handles complex scenarios like <strong>copying a string programmatically<\/strong> or integrating advanced data interactions seamlessly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-adding-confirmation-before-removal-optional\"><span class=\"ez-toc-section\" id=\"Adding_Confirmation_Before_Removal_Optional\"><\/span>Adding Confirmation Before Removal (Optional)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In most applications, removing items is a critical action. To avoid accidental deletions, you can add a confirmation dialog using Angular Material&#8217;s <strong>MatDialog<\/strong>.<\/p>\n\n\n\n<p>First, install Angular Material if it\u2019s not already part of your project:<\/p>\n\n\n\n<p><strong>ng add @angular\/material<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-html-template-update-grid-component-html\"><span class=\"ez-toc-section\" id=\"HTML_Template_Update_gridcomponenthtml\"><\/span>HTML Template Update (grid.component.html)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>&lt;button mat-button (click)=&#8221;openConfirmationDialog(DataList.id)&#8221;&gt;Remove&lt;\/button&gt;<\/strong><\/p>\n\n\n\n<p>In this updated template, clicking the &#8220;Remove&#8221; button now triggers a confirmation dialog.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-removing-an-item-with-confirmation-code-walkthrough\"><span class=\"ez-toc-section\" id=\"Removing_an_Item_with_Confirmation_Code_Walkthrough\"><\/span>Removing an Item with Confirmation (Code Walkthrough)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let\u2019s walk through the code for implementing a confirmation dialog before removing an item:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-typescript-grid-component-ts-0\"><span class=\"ez-toc-section\" id=\"TypeScript_gridcomponentts-2\"><\/span>TypeScript (grid.component.ts)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>import { MatDialog } from '@angular\/material\/dialog';\nimport { Component } from '@angular\/core';\n@Component({\n  selector: 'app-grid',\n  templateUrl: '.\/grid.component.html',\n  styleUrls: &#91;'.\/grid.component.css'],\n})\nexport class GridComponent {\n  dataSource = &#91;\n    { id: 331, name: 'Employee 1' },\n    { id: 332, name: 'Employee 2' },\n    { id: 333, name: 'Employee 3' },\n  ];\n  displayedColumns: string&#91;] = &#91;'id', 'name', 'role'];\nconstructor(private dialog: MatDialog) {}\nremoveItem(id: number) {\n    const indx = this.dataSource.findIndex((item) =&gt; item.id === id);\n    if (indx &gt;= 0) {\n      this.dataSource.splice(indx, 1);\n      this.dataSource = &#91;...this.dataSource];\n    }\n  }\n  openConfirmationDialog(id: number) {\n    const dRef = this.dialog.open(ConfirmDialogComponent);\n    dRef.afterClosed().subscribe((result) =&gt; {\n      if (result) {\n        this.removeItem(id); \/\/ Only remove if the user confirmed\n      }\n    });\n  }\n}\n@Component({\n  selector: 'app-confirmation-dialog',\n  template: `\n    &lt;h2 mat-dialog-title&gt;Confirm Removal&lt;\/h2&gt;\n    &lt;mat-dialog-actions&gt;\n      &lt;button mat-button (click)=\"dRef.close(true)\"&gt;Yes&lt;\/button&gt;\n      &lt;button mat-button (click)=\"dRef.close(false)\"&gt;No&lt;\/button&gt;\n    &lt;\/mat-dialog-actions&gt;\n  `,\n})\nexport class ConfirmDialogComponent {\n  constructor(public dRef: MatDialog) {}\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In this blog, we covered <strong>how to remove an item in grid in Angular<\/strong>, step by step. From setting up the Angular grid component, and defining the data source, to implementing the removal function with optional confirmation, this guide provides everything you need to manage grid items dynamically. Whether you or your <a href=\"https:\/\/www.softsuave.com\/blog\/angular-development-team\/\">Angular development Team<\/a> working with simple arrays or external APIs, Angular offers a flexible and powerful framework for managing grids in your applications. At Soft Suave we offer complete web app development services and are ready to help you meet your unique project requirements.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>How to Remove an Item in Grid in Angular: A Complete Guide. Learn the step-by-step process to effectively remove items from grids in Angular applications.<\/p>\n","protected":false},"author":3,"featured_media":18589,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"plain-container","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[92,7],"tags":[96,99],"class_list":["post-18573","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-it-solutions","category-web-solutions","tag-angular","tag-front-end"],"_links":{"self":[{"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/posts\/18573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/comments?post=18573"}],"version-history":[{"count":0,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/posts\/18573\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/media\/18589"}],"wp:attachment":[{"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/media?parent=18573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/categories?post=18573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.softsuave.com\/blog\/wp-json\/wp\/v2\/tags?post=18573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}