Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2: pass boolean to @Input

Tags:

angular

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!

like image 333
Fiona Avatar asked Jun 22 '16 14:06

Fiona


1 Answers

It should be

[showButton1]

instead of

[showbutton1]

(uppercase B - Angular2 templates are case sensitive)

like image 192
Günter Zöchbauer Avatar answered Oct 18 '22 20:10

Günter Zöchbauer