angular - having trouble formatting mat-expansion panel

Question

My expansion panel is not filling the entire width of the container, even when I set the width to 100%. Any ideas how to get it to fill the available space? I tried creating a stackblitz. I can't figure out why nothing is displaying https://angular-hikqnf.stackblitz.io my ts file

import {Component, OnInit, ChangeDetectionStrategy, OnDestroy, ViewChild} from '@angular/core';
import {AngularFirestore} from "@angular/fire/firestore";
import {catchError, map, tap} from "rxjs/operators";
import {of} from "rxjs";
import {MatAccordion} from "@angular/material/expansion";

@Component({
  templateUrl: './vaccine-codes.component.html',
  styleUrls: ['./vaccine-codes.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class VaccineCodesComponent implements OnInit, OnDestroy {
  @ViewChild(MatAccordion) accordion: MatAccordion;

  panelOpenState = false;
    configurations$ = this.afs.collection<Vaccine[]>('configurations').doc('CVXCODES').valueChanges()
    .pipe(tap(console.log));
  dtp$ = this.configurations$.pipe(map((data: Vaccine[]) => {
    data?.find((v: Vaccine) => v.Codes?.includes('dtp'))
  }),
    catchError(err => {
      console.error("dtp$", err);
      return of([]);
    }));

  constructor(private afs: AngularFirestore) {

  }

    ngOnInit(): void {

  }
  ngOnDestroy() {
  }
  async getConf() {
    try {
      const configurations = await this.afs.collection<Configuration>('configurations').doc('CVXCODES').get().toPromise();
    } catch (e) {
      console.error("getConf error", e)
    }
  }

}

export interface Configuration {
  ChpPrefix: string;
  Vaccines: { [key: string]: Vaccine[] };
  description: string;

}

export interface Vaccine {
  Codes: string[] | null;
}

my template

  <mat-accordion class="align">
<ng-container *ngIf="configurations$ | async as configurations" hideToggle>
    <mat-expansion-panel *ngFor="let item of configurations | keyvalue">
      <mat-expansion-panel-header>
        <div >
<!--          <pre>{{configurations | json}}</pre>-->
          <div fxLayout="row"  fxLayoutAlign="space-between">
            <mat-panel-title class="name" fxFlex="30%" >
              Name of Vaccine: {{item.key}}
            </mat-panel-title>
            <mat-panel-title class="description" fxFlex="70%">
              Description: {{item.value.description}}
            </mat-panel-title>
          </div>
        </div>
      </mat-expansion-panel-header>
      <p>This is the primary content of the panel.</p>

    </mat-expansion-panel>
    <mat-expansion-panel (opened)="panelOpenState = true"
                         (closed)="panelOpenState = false">
    </mat-expansion-panel>
</ng-container>
  </mat-accordion>

my scss file

.mat-expansion-panel {
  width: 100%;
  min-height: 60px;

}

sounds so simple but nothing I have tried works.

Answer 1

You appear to be missing your BrowserAnimationsModule import in your stackblitz, and is the reason nothing is displaying.

Once resolved, your mat-expansion panel appears to be taking up the full width of the container.

• If I am miss understanding the issue please let me know and I will take a closer look.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';