Untitled

import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
import { Subscription } from 'rxjs';
import { HeaderFormService } from '../services';

@Component({
  selector: 'app-base-header-section',
  template: 'base header section'
})
export abstract class BaseHeaderComponent implements OnInit, OnDestroy, OnChanges {
  private subscription = new Subscription();

  @Input('disabled') viewOnly = false;
  @Input('headerData') headerBundle;

  protected form: FormGroup;

  protected formControls = {}

  protected formControlsOnChange = {}

  protected formControlsDisabled = {}

  constructor(
    public formBuilder: FormBuilder,
    public translateService: TranslateService,
    public onChangeHeaderService: HeaderFormService
  ) {}

  abstract ngOnChanges(): void

  abstract beforeFormInit(): void

  abstract afterFormInit(): void

  private initOnValueChanges() {
    Object.keys(this.formControlsOnChange).forEach((controlKey: string) => {
      this.subscription.add(this.form.controls[controlKey].valueChanges.subscribe(this.formControlsOnChange[controlKey].bind(this)))
    })
  }

  private initFormGroup(): void {
    this.form = this.formControls ? this.formBuilder.group(this.formControls) : this.form;
  }

  ngOnInit(): void {
    this.beforeFormInit()
    this.initFormGroup()
    this.initOnValueChanges()
    this.afterFormInit()
  }

  onChange(field, value) {
    this.onChangeHeaderService.onChange(field, value);
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}