ng2-expansion-panels
ng2-expansion-panels copied to clipboard
ng2-expansion-panels : panel alignment with angular material card and styling the panel
I have angular 2 application, where I am displaying cards in different colors in rows and columns.I have added 2 expansion panels to the card. I want the panel to fit the card width and to have same colour as of the card.Also the contents in the panel to be left aligned. On expanding the panel, all the cards in the same row gets expanded. How do I fix this issue? Or this is the expected behaviour?
<div fxLayout="row" fxLayoutWrap style="padding-bottom: 15px;
padding-top: 15px; margin:auto; justify-content: center;background-color:paleturquoise;" >
<md-card fxFlex.gt-md="30" fxFlex.md="30" fxFlex.sm="auto" fxFlex.xs="100" *ngFor="let data of myData" style="margin:10px;"
[ngStyle]="{'backgroundColor': data.time > timeLimit1 ? '#69F0AE':(data.time < timeLimit2 ? '#FF5252':'yellow' )}">
<md-card-content >
<h1>Name: {{data.name}} </h1>
<h3 [ngStyle]="{'margin-top': '-3px','margin-bottom': '20px'}">{{data.time | date:'HH:mm:ss, MMMM dd'}}</h3>
<h3>
<a routerLink="">some link here</a>
</h3>
<expansion-panels-container>
<expansion-panel >
<expansion-panel-title>
Title1
</expansion-panel-title>
<expansion-panel-content>
<h2>content1: {{data.somedata1 }}</h2>
<h2>content2: {{data.somedata2}}</h2>
<h2>content3: {{data.somedata2}}</h2>
<h2>content4: {{data.somedata3}}</h2>
</expansion-panel-content>
</expansion-panel>
<expansion-panel>
<expansion-panel-title>
Title2
</expansion-panel-title>
<expansion-panel-content>
<h2>content2: {{data.somedata2}}</h2>
<h2>content3: {{data.somedata2}}</h2>
<h2>content4: {{data.somedata3}}</h2>
</expansion-panel-content>
</expansion-panel>
</expansion-panels-container>
</md-card-content>
</md-card>
</div>