Roger Chan Roger Chan - 3 months ago 27
Dart Question

How to let component detect its hidden status in angular2?

I have two components, child component display status is controlling by the parent. How to let child aware its parent is changed the hidden attribute?

// Parnet
@Component(selector: '[component-parent]',
templateUrl: 'component-parent.html')
class ComponentParent {
bool enableChild;
}

<div>
<div component-child [hidden]="enableChild"></div>
</div>

// Child
@Component(selector: '[component-child]',
templateUrl: 'component-child.html')
class ComponentChild {
// How child aware not it is not hidden anymore?
}

Answer

The component needs an @Input() with matching name to support [xxx]="..." binding:

@Component(selector: '[component-child]',
    templateUrl: 'component-child.html')
class ComponentChild {
  @Input()
  set hidden(bool val) {
    print(val);
  }
}