Using Angular material components
WARNING: This is a Google translated (originally Chinese) and reposted article that probably is mostly comfortably understandable for senior JavaScript developers.
I tried to create a simple program using angular material. This is an example of a program to CRUD list data of prefectures. Most of it is an example based code of Angular Material , but I will put it on a blog because I have investigated / coded part to make it work as I thought.
* Because DB is not linked, data that has been changed additionally is not retained.
In addition to the above table, try implementing a dialog box.
We create a project according to the start up of Angular Material and refer to Example for how to use each component. The source is up to stackblitz , and it is possible to check the operation.
environment
Angular CLI: 7.0.7
Node: 8.11.4
OS: windows
8.1 x 64 Angular: 7.0.4
Package Version
@ angular-devkit / core 7.0.7
@ angular-devkit / schematics 7.0.7
@ angular / cdk 7.1.1
@ angular / cli 7.0.7
@ angular / material 7.1.1
@ ngtools / webpack 7.0.7 @
schematics / angular 7.0.7
@ schematics / update 0.10.7
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1
The material component used is below.
BrowserAnimationsModule
MatInputModule
MatButtonModule
MatTableModule
MatCheckboxModule
MatDialogModule
MatPaginatorModule
MatSortModule
MatSelectModule
Application component
| Component / Service | Description | material |
| PrefViewComponent | table display, selection, filter, sort, paging | MatTableModule, MatCheckboxModule, MatPaginatorModule, MatSortModule, MatSelectModule |
| PrefViewEditComponent | Edit button, Dialog call, data delete | MatButtonModule, MatDialogModule |
| PrefViewEditDialogComponent | Dialog display, data addition / update | MatDialogModule, MatInputModule, MatButtonModule |
| prefService | Data retention, component cooperation |
Below is a description of only the point part of the application component.
PrefViewComponent
Implement single row selection
In generating SelectionModel bound by matCheckBox, specify single (false) for constructor first argument (selection mode specification).
pref-view.component.ts
selection = new SelectionModel < PrefItem > ( false , []);
In order to listen for the checkBox change event, declare the emitter of this SelectionModel and set the callback function to subscribe.
pref-view.component.ts
Private CbEmmiter = This . Selection . OnChange . AsObservable ();
NgOnInit () {
this . CbEmmiter . subscribe ( cb => {
an if ( cb . source . selected . length > 0 ) {
this . service . SelectPerfItem = cb . source . selected [ 0 ];
} the else {
this . service . SelectPerfItem = null ;
}
});
}
Column Sort Paging
It can be easily implemented by using MatSort, MatPaginator. The implementation method is as shown in Example. In the example, table datasource is updated asynchronously, so we need to rebind the same component at that moment. Write the corresponding processing in ngAfterViewInit.
pref-view.component.ts
NgAfterViewInit () {
this . dataSource . paginator = this . paginator ;
this . dataSource . sort = this . sort ;
}
Also write this processing as a trigger for datasource binding.
pref-view.component.ts
dataDataSource < prefItem > ( this . service . data ); this . dataSource . paginator = this . paginator ; this . dataSource . sort = this . sort ; } updateData () {
// update the data source of the table
this . dataSource = new MatTableDataSource
filter
Example is diverted as it is. We are using the filter method of MatTableDataSource.
PrefViewEditDialogComponent
I think that it is more readable if it is separated from the parent component and implemented as an independent component. This allows you to share with multiple components without being bound by a single component. We acquire the operation mode from the service, and have added / update dialog in common.
I want to convert MatInput's numeric display to comma, so we are converting it with the change event.
pref-edit-dialog.component.ts
OnChangeArea () {
this . EditItem $ . PrefArea = Number ( this . PerfArea $ . The replace ( /, / g , '' ));
this . PerfArea $ = formatNumber ( this . EditItem $ . PrefArea , this . locale , '. 2 ' );
}
We are processing data addition / updating on Dialog, and we send notification after processing to Observable of service. Other components can receive change notification by subscribing the Observable of the service. This mechanism allows the table component to update its display.
Finally
Although I felt using the material, I could use it without much collision (I can use it pleasantly). Particularly favorite is the ease of use of Dialog. If it is made into a component, it can be called from any component, and a separately created component can be placed on Dialog. It is a UI that you can feel the merit of loosely coupled design.