import { BehaviorSubject } from 'rxjs/BehaviorSubject' ; import { ChangeDetectionStrategy , Component , Input , OnChanges , Output , SimpleChanges } from '@angular/core' ; import { FormControl , FormGroup , Validators } from '@angular/forms' ; @ Component ( { selector : 'pm-key-value-form' , templateUrl : './key-value-form.component.html' , styleUrls : [ './key-value-form.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush } ) export class KeyValueFormComponent implements OnChanges { @ Input ( ) keyVals : { [ key ] : string | boolean | number ; } = { } ; @ Output ( ) attributesChanged = new BehaviorSubject ( this . keyVals ) ; public form = new FormGroup ( { key : new FormControl ( '' , [ Validators . required ] ) , value : new FormControl ( '' , [ Validators . required ] ) } ) ; ngOnChanges ( changes ) { if ( changes . keyVals ) { this . attributesChanged . next ( changes . keyVals . currentValue ) ; } } add ( obj ) { this . attributesChanged . next ( { ... this . attributesChanged . getValue ( ) , [ obj . key ] : obj . value } ) ; } remove ( key ) { this . attributesChanged . next ( { ... Object . keys ( this . attributesChanged . getValue ( ) ) . filter ( k => k !== key ) . reduce ( ( a , c ) => ( { ... a , [ c ] : this . attributesChanged . getValue ( ) [ c ] } ) , { } ) } ) ; } trackByFn ( index , item ) { console . log ( item ) ; return index ; } }