File
Implements
Metadata
| selector |
collapsible-list |
| styleUrls |
./collapsible-list.component.scss |
| templateUrl |
./collapsible-list.component.html |
import { Component, OnInit, Input } from '@angular/core';
import { Borrowing } from 'src/app/models/Borrowings';
@Component({
selector: 'collapsible-list',
templateUrl: './collapsible-list.component.html',
styleUrls: ['./collapsible-list.component.scss']
})
export class CollapsibleListComponent implements OnInit {
constructor() {}
@Input() title;
@Input() titleDescription;
@Input() borrowings: Borrowing[];
@Input() type;
ngOnInit() {}
}
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
{{ title }}
</mat-panel-title>
<mat-panel-description>
{{ titleDescription }}
</mat-panel-description>
</mat-expansion-panel-header>
<div>
<section *ngIf="type == 'borrowings'">
<div class="details">
<div>Title</div>
<div>Due Date</div>
</div>
<div class="details" *ngFor="let borrowing of borrowings">
<div>{{ borrowing.title }}</div>
<div>{{ borrowing.date_due }}</div>
</div>
</section>
<section *ngIf="type == 'overdues'">
<div class="details">
<div>Title</div>
<div>Date passed</div>
</div>
<div class="details" *ngFor="let borrowing of borrowings">
<div>{{ borrowing.title }}</div>
<div>{{ borrowing.date_due }}</div>
</div>
</section>
</div>
</mat-expansion-panel>
</mat-accordion>
.details {
display: flex;
justify-content: space-between;
}
Legend
Html element with directive