Integration with Angular Material
The standard way to display validation error messages in Angular Material is to use a mat-error element. To use ngx-valdemort with Angular Material, you simply need to put the val-errors component inside mat-error.
The standard layout of Material form fields doesn't leave enough room to display more than one error message, so you should configure ngx-valdemort to only display one error message.
mat-error only displays its content if the control is invalid, and if it's touched or if its form is submitted. The strategy is thus the exact same one as the default strategy of ngx-valdemort. You should thus not change the shouldDisplayErrors strategy of ngx-valdemort. Or you can change it to always return true to spare a few CPU cycles, since the containing mat-error already does the job of hiding errors.
Since Material 15, at least with the default theme, it seems that mat-error expects elements displayed inside it to be inline elements, otherwise a large margin appears on top of the error message. So the div generated by val-errors should be made inline by adding a CSS rule in your global stylesheet. An alternative is to provide an errorClasses in the configuration of ngx-valdemort.