right text align mat-expansion-panel material component
The panel header content are contained in a span which is a flexbox so you can use that to push the contents out to the sides.
view:
<mat-expansion-panel>
<mat-expansion-panel-header class="right-aligned-header">
<mat-panel-title>
Cycle ingénieur en informatique
</mat-panel-title>
<mat-panel-description>
2014-2017
</mat-panel-description>
</mat-expansion-panel-header>
css (this has to be global css eg. styles.css not in the component style):
.right-aligned-header > .mat-content {
justify-content: space-between;
}
.mat-content > mat-panel-title, .mat-content > mat-panel-description {
flex: 0 0 auto;
}
Here is a Stack Blitz demo
Based on this solution: https://github.com/angular/components/issues/10024
.mat-expansion-panel-header-description, .mat-expansion-panel-header-title {
flex-basis: 0;
}
and reading again the problem, this worked for me:
.mat-expansion-panel-header-description {
display: flex;
justify-content: flex-end;
}