How to override template for angular material 2 datepicker

问题

I need to modify the templates for the angular 2 material date-picker. Its templates are declared in several internal components that are defined in @angular/material/esm5/datepicker.es5.js.

I could modify the template directly in the node package, but then it would get overwritten when updating.

The only two ways I can see this being possible is if I modify the template dynamically (is this really possible?), or if I copy over the entire angular material node package locally and then modify that (what is the best way to do this?). Thoughts?

回答1:

you have two ways:

1. create a new component extending the material datepicker and assign you won template
2. override some material css rules in order to change its look and feel

回答2:

Extending isn't an option for this case if you looked at the architecture/design of the mat-datepicker dependencies. The solution we went with just involved referencing the component type and assigning a new template to the reference:

let matCalendar: any = MatCalendar;
matCalendar.decorators[0].args[0].template ='...'

来源：https://stackoverflow.com/questions/49822543/how-to-override-template-for-angular-material-2-datepicker