Angular material Data table with form data
Angular Material is an angular.js UI framework that has complete material design support. Material components provide consistency and attractiveness, to the functional web pages and web applications. Angular material table components create data-rich grids in every optimized way as it has full of features and a variety of functionalities such as sorting, pagination,expand-collapse, custom templating.
In this article, we‘ll have a look at how to load an Angular material Data table with form data by going through an example work. For more, we’ll add some basic operations like Add, Edit, Delete rows using the Dialog component on angular material. Dialog popup layout is displayed to the user above all content of the screen.
First, a new angular project should be created after installing angular CLI.
# Install Angular CLI
$ npm install -g @angular/cli# Create new project
$ ng new project_name# Enter project
$ cd project_name# run the application
$ ng serve --open
Then Material package is installed.
ng add @angular/materialMaterial Data Table
The material data table is created by adding the <table> with mat-table directive. [datasource] property takes a collection of data passed to the data table. ng-container element with matColumnDef created columns. Here matColumnDef is assigned with the same key in the JSON data object. *matHeaderRowDef takes the array of columns we want to show in the table. Column headers are includes in *matHeaderCellDef.
The material data table contains three columns as Name, Email which are loaded by user inputs through the material form, and later we’ll add an additional column as Actions to do basic operations Edit and Delete table rows.
User properties are defined in an interface called user.
columnsToDisplay string array is used to define columns of the data table. data objects are taken into the array called USER_DATA. newUser is a sample of a new user object.
Material Form field
mat-form-field is used to create the form that use to get user inputs. [(ngModel)] two-way binding used to send an event from view to the component. I used angular material mandatory fields in creating form fields using pattern and required keywords. Here pattern includes a regular expression for which used in mat-form-field email validation. mat-raised-button as submit button with addUser() Onclick function.
The angular material table won’t update when a new row will arrive. So after adding a new data row, material table is refreshed by updating dataSource without using its instance as shown in the below line of code.
this.myDataArray = […newUsersArray];In the latest versions of Angular Material 11 | 10, we can call renderRows() method after updating the data of a row, if we use an array directly as a source It is shown in the bellow code and there the table is ViewChild of the mat-table. So we can see the template variable #table has defined in HTML template in creating the material table and we can use it here when calling renderRows(). method.
call table.renderRows()Material Data Table-Actions column
Actions column contains action buttons for each row to delete and Edit particular row elements. Edit button pass row object(this.user) with openDialog() click method and delete() button pass row object(this.user) with delete click method.
delete function takes particular row details through its parameter argument. Then delete the row by checking the email. Angular customized alerts used to show success alerts by installing sweetalert2.
The openDialog() method is getting row_obj as row object to pass in open() method. That is subscribed to Dialog close event using afterClosed() method. After sent back from DialogBoxComponent close() method. User name of the row object is replaced by name entered into the dialog box for updating. (row_obj.userName=this.name)
Create Dialog box component
As mentioned above in editing the row object and update username, I used Material dialog box to take user input. Dialog box also contains update and cancel buttons. For that, a new component was needed. Here I have created a new component as DialogBoxComponent with the bellow command.
ng generate component dialog-boxHTML:
component.ts:
MAT_DIALOG_DATA gets the data passed in the openDialog() method’s data parameter from the App component . MatDialogRef performs actions on opened dialog modal and is used to close Dialog.
I improved the form, Edit, and delete button actions which functioning with more fields and validations. The Code of my example work can be accessed here.
