Customize Angular Material

Question

I have two components called one.component.html and two.components.html. I tried to customize Angular material datepicker for only one component and leave another component to have Angular Stock datepicker. If I write a custom css code in one.component.css, it doesn't work. So, I have to write in Style.css. But writing in the Style.css will customize both the components. How do I specify customization in different component?

Answer 1

shadow-piercing descendant combinator (deprecated)

You can use ::ng-deep in the CSS definition of the respective component to force your style down through the child component tree into all the child component views, e.g.:

/* two.component.css */
::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){
  border-color:darkblue;
}

Custom CSS classes

Alternatively, you can assign different CSS classes for each DatePicker, which you then style using style.css. The @angular/material/datepicker API provides two inputs on mat-datepicker for that purpose:

panelClass Classes to be passed to the date picker panel. Supports the same syntax as ngClass dateClass Function that can be used to add custom CSS classes to dates

Using this, your OneComponent template could now look like this:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker panelClass="datepickerOne"></mat-datepicker>
</mat-form-field>

and the corresponding styling in style.css like this:

.datepickerOne .mat-calendar-body-today:not(.mat-calendar-body-selected){
  border-color: darkgreen;
}

If you opt for the custom CSS class solution, I'd suggest you create a second CSS file within your component folder with only your datepicker custom styles and import that one into your style.css to keep everything organized.

I've created a Stackblitz for you to check out the mentioned possibilities.

Answer 2

Better architecture would be creating a datepicker.scss file in assets/scss folder with your custom SCSS. And the importing inside the components you wish have the custom-styling of datepicker. @import "src/assets/scss/datepicker.scss"; This way you can add complexity to your designs in an easy-implementation.