<p dir="auto"><strong>I'm submitting a bug/feature request</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[x] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Have a look at that, (demo: <a href="http://plnkr.co/edit/P25dYPC5ChRxpyxpL0Lj?p=preview" rel="nofollow">http://plnkr.co/edit/P25dYPC5ChRxpyxpL0Lj?p=preview</a>):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({
  selector: 'my-app',
  providers: [],
  template: `
    &lt;div [formGroup]=&quot;form&quot;&gt;
      &lt;input formControlName=&quot;first&quot; [disabled]=&quot;isDisabled&quot;&gt;
    &lt;/div&gt;
  `,
  directives: []
})
export class App {
  isDisabled = true
  form = new FormGroup({
    'first': new FormControl('Hello')
  })
}"><pre class="notranslate"><code class="notranslate">@Component({
  selector: 'my-app',
  providers: [],
  template: `
    &lt;div [formGroup]="form"&gt;
      &lt;input formControlName="first" [disabled]="isDisabled"&gt;
    &lt;/div&gt;
  `,
  directives: []
})
export class App {
  isDisabled = true
  form = new FormGroup({
    'first': new FormControl('Hello')
  })
}
</code></pre></div>
<p dir="auto">There is a warning message asking to refactor the code, but more importantly, the input is unfortunately not disabled. Refactoring the code to what is suggested is not helping either, i.e. doing this will not work, (demo: <a href="http://plnkr.co/edit/Gf7FGR42UXkBh6e75cm2?p=preview" rel="nofollow">http://plnkr.co/edit/Gf7FGR42UXkBh6e75cm2?p=preview</a>):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Component({
  selector: 'my-app',
  providers: [],
  template: `
    &lt;div [formGroup]=&quot;form&quot;&gt;
      &lt;input formControlName=&quot;first&quot;&gt;
    &lt;/div&gt;
  `,
  directives: []
})
export class App {
  isDisabled = false
  form = new FormGroup({
    'first': new FormControl({value: 'hello', disabled: this.isDisabled})
  })

  constructor() {
    setTimeout(() {
      this.isDisabled = true  
    }, 10)
  }
}"><pre class="notranslate"><code class="notranslate">@Component({
  selector: 'my-app',
  providers: [],
  template: `
    &lt;div [formGroup]="form"&gt;
      &lt;input formControlName="first"&gt;
    &lt;/div&gt;
  `,
  directives: []
})
export class App {
  isDisabled = false
  form = new FormGroup({
    'first': new FormControl({value: 'hello', disabled: this.isDisabled})
  })

  constructor() {
    setTimeout(() {
      this.isDisabled = true  
    }, 10)
  }
}
</code></pre></div>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
After the callback of the setTimeout is executed, the input should be disabled, but it is not.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
Yes, please look here: <a href="http://plnkr.co/edit/P25dYPC5ChRxpyxpL0Lj?p=preview" rel="nofollow">http://plnkr.co/edit/P25dYPC5ChRxpyxpL0Lj?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
To have the same behaviour, or similar one than in RC5. At least, we shall have a possibility, even if it's a breaking change, to set dynamically the <code class="notranslate">disabled</code> attribute. As of now, it does not seem possible anymore.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.6</li>
<li><strong>Browser:</strong> [ Chrome 52 ]</li>
<li><strong>Language:</strong> [ TypeScript ]</li>
</ul>
<p dir="auto">Some subtle bug</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export class BaseComp { 
    @Input() val: any;
    ...
}

@Component(...)
export class Comp extends BaseComp { 
    //@Input() val: any; 

   //@Output() evt = new EventEmitter(); &lt;----
  //If uncomment this one, you have to uncomment also  @Input ... line, overwise 
  // component wouldn't see `val` variable
    ...
   ngOnInit() {
     console.log(&quot;I see ya, all fine, but try uncomment @Output &quot;,  this.val);
   }
}
"><pre class="notranslate"><code class="notranslate">export class BaseComp { 
    @Input() val: any;
    ...
}

@Component(...)
export class Comp extends BaseComp { 
    //@Input() val: any; 

   //@Output() evt = new EventEmitter(); &lt;----
  //If uncomment this one, you have to uncomment also  @Input ... line, overwise 
  // component wouldn't see `val` variable
    ...
   ngOnInit() {
     console.log("I see ya, all fine, but try uncomment @Output ",  this.val);
   }
}

</code></pre></div>