Need Help Disabling Year/month combobox in mat-calendar Angular Material Component


Good morning. I currently have the following inline mat-calendar angular material component. I don’t need this combobox but I do need the arrows. How do I disable it? I’ve tried several things and nothing is working!

enter image description here

This is the code Im using at the moment.



You need :host ::ng-deep to access the DOM element for .mat-calendar-period-button which is generated by <mat-calendar> and overwrite its CSS styling rule.


Be sure to include the :host selector before ::ng-deep. If the
::ng-deep combinator is used without the :host pseudo-class selector,
the style can bleed into other components.

Remark: This answer is for hiding the month year button.


:host ::ng-deep .mat-calendar-period-button {
  display: none;

Sample Solution on StackBlitz


(deprecated) /deep/, >>>, and ::ng-deep

Answered By – Yong Shun

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.