htmlangulartypescriptangular-materialangular-material2

Adding a component with mat-expansion-panel to mat-accordian

I have a component with a mat-expansion-component and I want to place this component in a mat-accordian. This works except for the Styling.

<mat-accordion>
    <app-panel1></app-panel1>
    <app-panel2></app-panel2>
</mat-accordion>

app-panel.html panel1 & panel2 have same format.

<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
        <mat-panel-title>
            Title
        </mat-panel-title>
        <mat-panel-description>
            Description
        </mat-panel-description>
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
        Content
    </ng-template>
</mat-expansion-panel>

What's happening:

What's happening

What I want:

What I want

taken from the angular material docs

Solution

  • Your problem comes from:

    .mat-accordion .mat-expansion-panel:last-of-type {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.mat-accordion .mat-expansion-panel:first-of-type {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

    And since it's displayed like this, it's applying for the start and the end

    <app-panel1>
    <mat-expansion-panel></mat-expansion-panel>
</app-panel1>

    So you can override in your component, this attribute to not be applied. For example in app-panel1.component.scss

    :host{
  .mat-expansion-panel:last-of-type {
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
  }
}