CODEWITHSUNDEEP
angularangular-material
Chris
Chris

Reputation: 1304

Customize Angular Material

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?

Upvotes: 7

Views: 20506

Answers (4)

coreuter
coreuter

Reputation: 3572

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.

Upvotes: 16

Deepak kansal
Deepak kansal

Reputation: 29

You Can Still Use this

::ng-deep mycomponent{
    //custom css
}

Upvotes: 2

Sami Haroon
Sami Haroon

Reputation: 909

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.

Upvotes: 5

talhature
talhature

Reputation: 2165

You can leverage ng-deep selector. It has been deprecated for a long time but not replaced with anything by CSS workgroup yet. Many developers are still using it since alternative ways have their own drawbacks too.

Inside your component's css file you can have something like this:

  ::ng-deep yourcomponent{
    //custom css
  }

Upvotes: 4

Related Questions