I hava an angular 4.4.4 application with material 2.0.0-beta.12
and I want to use the mat-expansion-panel
from material design.
This is my code :
<mat-expansion-panel class="parametersPanel">
<mat-expansion-panel-header>
<mat-panel-title>
PARAMETERS
</mat-panel-title>
</mat-expansion-panel-header>
<table style="width:100%">
<tbody>
<tr class="parameterListItem">
<td class="icon"><img src="assets/images/alert.png"></td>
<td class="parameterName">Parameter 1</td>
<td class="parameterValue">Value</td>
<td class="unit">unit</td>
</tr>
</tbody>
</table>
</mat-expansion-panel>
So it works well but it possible to remove the margin in the mat-expansion-panel-body
which has, from the browser margin: 0 24px 16px;
?
For the action bar, use the mat-action-row element. To disable the panel, add the disabled directive to the panel element and set it to true. To enabled it, set it to false.
Method 1. As stated on the Angular Material Expansion Panel documentation, we can customise the stylings of the mat-extension-panel-header , which will in turn allow you to customise the icons. First and foremost, you hide the original icon by setting the hideToggle attribute to false.
To use the Angular material accordion, we need to import MatExpansionModule into our custom module. It is up to you to add all material modules in a separate custom module or root module app. We are adding all material modules in a custom module, it containing only the material module.
In your style.css
or your components style you need to add the following css:
/deep/ .parametersPanel .mat-expansion-panel-body {
padding: 0;
}
This is due to view encapsulation. You can read more about this here: https://angular.io/guide/component-styles
Update:
The use of /deep/
, ::ng-deep
to modify the styles of material components has been deprecated. See this link.
However, using @angular/core
^6.1.0
and @angular/material
^6.4.6
I was able to change the style of Angular Material's Expansion panel without having to add anything specific. It seems like you can now simply change the style in your components css file. So this should work:
.mat-expansion-panel-body {
padding: 0;
}
You can read here for more information about the deprecation of /deep/
, ::ng-deep
here.
This works 100%.
Add this inside your style.css:
.mat-expansion-panel-content > .mat-expansion-panel-body {
padding: 0 !important;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With