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.
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.
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';