File

src/app/superadmin/settings/edit-custom-text.component.ts

Implements

OnInit OnDestroy

Metadata

selector app-custom-text
template
<div>{{ctKey}}</div>
<div fxLayout="row" fxLayoutAlign="start start">
  <div fxFlex="40" style="margin: 0 10px 10px 30px">
    <em>{{ctLabel}}</em>
  </div>
  <mat-form-field fxFlex>
    <textarea matInput cdkTextareaAutosize [formControl]="inputControl">
    </textarea>
  </mat-form-field>
  <button mat-button (click)="setToDefault()" matTooltip="Auf Standard setzen"
          [disabled]="inputControl.value === ctDefaultValue">
    <mat-icon>undo</mat-icon>
  </button>
</div>

Index

Properties
Methods
Inputs
Outputs

Inputs

ctDefaultValue
Type : string
ctInitialValue
Type : string
ctKey
Type : string
ctLabel
Type : string
parentForm
Type : FormGroup

Outputs

valueChange
Type : EventEmitter

Methods

ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
setToDefault
setToDefault()
Returns : void

Properties

inputControl
Default value : new FormControl()
value
Type : string
valueChanged
Default value : false
valueChangeSubscription
Type : Subscription
import {
  Component, Input, Output, OnDestroy, OnInit, EventEmitter
} from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-custom-text',
  template: `
    <div>{{ctKey}}</div>
    <div fxLayout="row" fxLayoutAlign="start start">
      <div fxFlex="40" style="margin: 0 10px 10px 30px">
        <em>{{ctLabel}}</em>
      </div>
      <mat-form-field fxFlex>
        <textarea matInput cdkTextareaAutosize [formControl]="inputControl">
        </textarea>
      </mat-form-field>
      <button mat-button (click)="setToDefault()" matTooltip="Auf Standard setzen"
              [disabled]="inputControl.value === ctDefaultValue">
        <mat-icon>undo</mat-icon>
      </button>
    </div>
    `
})

export class EditCustomTextComponent implements OnInit, OnDestroy {
  @Input() parentForm: FormGroup;
  @Input() ctKey: string;
  @Input() ctLabel: string;
  @Input() ctDefaultValue: string;
  @Input() ctInitialValue: string;
  @Output() valueChange = new EventEmitter<EditCustomTextComponent>();
  inputControl = new FormControl();
  valueChanged = false;
  value: string;
  valueChangeSubscription: Subscription;

  ngOnInit(): void {
    this.inputControl.setValue(this.ctInitialValue ? this.ctInitialValue : this.ctDefaultValue);
    this.parentForm.addControl(this.ctKey, this.inputControl);
    this.valueChangeSubscription = this.inputControl.valueChanges.subscribe(() => {
      this.value = this.inputControl.value;
      if (!this.value) {
        this.inputControl.setValue(this.ctDefaultValue, { emitEvent: false });
        this.value = this.ctDefaultValue;
      }
      this.valueChanged = this.ctInitialValue ?
        (this.value !== this.ctInitialValue) : (this.value !== this.ctDefaultValue);
      this.valueChange.emit(this);
    });
  }

  setToDefault(): void {
    this.inputControl.setValue(this.ctDefaultValue);
  }

  ngOnDestroy(): void {
    this.valueChangeSubscription.unsubscribe();
    this.parentForm.removeControl(this.ctKey);
  }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""