File
Metadata
| selector |
mat-faq-admin |
| styleUrls |
./mat-faq-admin.component.scss |
| templateUrl |
./mat-faq-admin.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
title
|
Default value : 'Admin'
|
|
|
import {Component, EventEmitter, Input, Output} from '@angular/core';
import {FaqItem} from '../../../module/faq.item';
@Component({
selector: 'mat-faq-admin',
templateUrl: './mat-faq-admin.component.html',
styleUrls: ['./mat-faq-admin.component.scss']
})
export class MatFaqAdminComponent {
@Input()
title = 'Admin';
@Output()
onFAQItemAdded: EventEmitter<FaqItem> = new EventEmitter<FaqItem>();
question: string;
answer: string;
reset() {
this.question = this.answer = undefined;
}
add(): void {
const faqItem: FaqItem = {
question: this.question,
answer: this.answer
}
this.onFAQItemAdded.emit(faqItem);
this.reset();
}
}
<mat-toolbar color="primary">{{title}}</mat-toolbar>
<mat-card>
<mat-card-content fxLayout="column">
<mat-form-field class="full-width" appearance="outline">
<mat-label>The question</mat-label>
<input matInput [(ngModel)]="question">
<mat-hint>Add here the question of your clients</mat-hint>
</mat-form-field>
<mat-form-field class="full-width" appearance="outline">
<mat-label>The answer</mat-label>
<textarea matInput [(ngModel)]="answer"></textarea>
<mat-hint>Please type an appropriate answer here to the above question</mat-hint>
</mat-form-field>
</mat-card-content>
<mat-card-actions fxLayoutAlign="end">
<button mat-fab color="primary" (click)="add()">
<mat-icon>add</mat-icon>
</button>
</mat-card-actions>
</mat-card>
.full-width {
width: 100%
}
.mat-form-field {
margin: 0.8rem 0 0.8rem 0;
}
Legend
Html element with directive