Angular | Edit/ Add/ Delete Rows in Material Table using Dialogs

In this tutorial, we’re going to discuss how to Add, Update, Delete Material Table rows.

Create a new Angular Project

Run the following commands to create a new Angular project


Install Material Package


Update App Module


Create Material Table

Update the app.component.html as shown below:

Now replace the following code in app.component.ts file


Create a Dialog Component

Update the dialog-box.component.ts file with following code:


In the dialog-box.component.html file add following code with a heading, input field and buttons to perform action based operation.

That’s it now run the application using


Hope you enjoyed this tutorial. Share your feedback in comment section.

Leave a comment

Your email address will not be published. Required fields are marked *