Issue
I have an angular expansion panel as shown below. How can i change the color of the arrow below to white?
My code (HTML):
<md-expansion-panel>
<md-expansion-panel-header>
<md-panel-title>
Personal data
</md-panel-title>
<md-panel-description>
Type your name and age
</md-panel-description>
</md-expansion-panel-header>
<md-form-field>
<input mdInput placeholder="First name">
</md-form-field>
<md-form-field>
<input mdInput placeholder="Age">
</md-form-field>
</md-expansion-panel>
My code (TS):
import {Component} from '@angular/core';
/**
* @title Basic expansion panel
*/
@Component({
selector: 'expansion-overview-example',
templateUrl: 'expansion-overview-example.html',
})
export class ExpansionOverviewExample {}
Solution
Working code is below:
<md-expansion-panel>
<md-expansion-panel-header class="specific-class">
<md-panel-title>
Personal data
</md-panel-title>
<md-panel-description>
Type your name and age
</md-panel-description>
</md-expansion-panel-header>
<md-form-field>
<input mdInput placeholder="First name">
</md-form-field>
<md-form-field>
<input mdInput placeholder="Age">
</md-form-field>
</md-expansion-panel>
import {Component} from '@angular/core';
/**
* @title Basic expansion panel
*/
@Component({
selector: 'expansion-overview-example',
templateUrl: 'expansion-overview-example.html',
styles: [`
::ng-deep .specific-class > .mat-expansion-indicator:after {
color: white;
}
`],
})
export class ExpansionOverviewExample {}
Explanation:
-
In order to style nested elements dynamically added by Angular
Material component you need to use special selector ::ng-deep.
That allows to work around view encapsulation. -
In order to override built-in component styles applied dynamically
you need to increase CSS specificity for your selector. That’s
the reason for adding additional CSS class specific-class. If you
gonna use selector ::ng-deep .mat-expansion-indicator:after
expansion component will override it.