src/module/components/faq/mat-faq.component.ts
| selector | mat-faq |
| styleUrls | ./mat-faq.component.scss |
| templateUrl | ./mat-faq.component.html |
Inputs |
displayMode
|
Default value : |
faqList
|
Type :
Default value : |
multi
|
Default value : |
title
|
Default value : |
import {Component, Input} from '@angular/core';
import {FaqItem} from '../../../module/faq.item';
@Component({
selector: 'mat-faq',
templateUrl: './mat-faq.component.html',
styleUrls: ['./mat-faq.component.scss']
})
export class MatFaqComponent {
@Input()
title = 'FAQ';
@Input()
multi = false;
@Input()
displayMode = 'default'; // or flat
@Input()
faqList: FaqItem[] = [];
}
<mat-toolbar color="primary">{{title}}</mat-toolbar>
<mat-accordion [displayMode]="displayMode" [multi]="multi"
class="faq-container">
<mat-expansion-panel *ngFor="let faqItem of faqList">
<mat-expansion-panel-header>{{faqItem.question}}</mat-expansion-panel-header>
<p>{{faqItem.answer}}</p>
</mat-expansion-panel>
</mat-accordion>
./mat-faq.component.scss
.faq-container {
//width: 500px;
}