Angular2: pass boolean to @Input

Question

I'm writing a reusable component in angular2. In the parent component, I can set the value of the @Input in the child by including it in the template like this:

 <child-component #logoutModal [button1Text]="'Do Something Groovy'" 
  [showbutton1]="false"></child-component'

The text is interpolated into the child using {{ button1Text }}, as expected. However, for the boolean above, the value isn't passed into the template. If I do {{showButton1}} in the child component's template, it displays true, which is the default value set in the child's class using the @Input decorator.

EDIT: here's how I set the default values in the child component:

export class ChildComponent implements AfterViewInit {
  // default values
  @Input() public showButton1: boolean = true;
  @Input() public button1Text: string = 'OK';
  //..

How do I override/set this boolean value from the parent component? Thanks!

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-06-22T14:42:14

It should be

[showButton1]

instead of

[showbutton1]

(uppercase B - Angular2 templates are case sensitive)

Angular2: pass boolean to @Input

1 Answers