File

src/module/components/ngx-material-faq-admin/mat-faq-admin.component.ts

Metadata

selector mat-faq-admin
styleUrls ./mat-faq-admin.component.scss
templateUrl ./mat-faq-admin.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

title

Default value : 'Admin'

Outputs

onFAQItemAdded $event Type: EventEmitter<FaqItem>

Methods

add
add()
Returns : void
reset
reset()
Returns : void

Properties

answer
answer: string
Type : string
question
question: string
Type : string
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>

./mat-faq-admin.component.scss

.full-width {
  width: 100%
}

.mat-form-field {
  margin: 0.8rem 0 0.8rem 0;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""