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 *