import { Component, Attribute, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; import { GroupInputComponent } from './../../_abstract/group-input.component'; @Component({ selector: 'app-checkbutton-group', templateUrl: './checkbutton-group.component.html', styleUrls: ['./checkbutton-group.component.scss'] }) export class CheckbuttonGroupComponent extends GroupInputComponent implements OnInit { firstControl: FormControl; constructor( @Attribute('firstEnablesRest') private firstEnablesRest ) { super(); this.firstEnablesRest = firstEnablesRest === ''; // True if 'firstEnablesRest' exists as component attribute } ngOnInit() { super.ngOnInit(); if (this.meta.firstEnablesRest) { this.firstEnablesRest = this.meta.firstEnablesRest; } if (this.firstEnablesRest) { this.firstControl = this.formGroup.controls[this.controlNames[0]] as FormControl; this.childMeta[0].isDisabled = false; this.childMeta.slice(1).map(meta => { meta.isDisabled = !this.firstControl.value; return meta; }); // Observe value changes on first control this.firstControl.valueChanges.subscribe(val => { for (var i = 1; i < this.childMeta.length; i++) { // NOTE: We rassign the input (array member) to trigger change detection (otherwise it doesn't run) // See https://juristr.com/blog/2016/04/angular2-change-detection/ this.childMeta[i] = { ...this.childMeta[1], isDisabled: !val } } }); } } }