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!

Can you show that part of your component?

Maximilian Riegler
– Maximilian Riegler

2016-06-22 14:25:09 +00:00
Commented Jun 22, 2016 at 14:25 — Maximilian Riegler
– Maximilian Riegler, Commented Jun 22, 2016 at 14:25

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

29

It should be

[showButton1]

instead of

[showbutton1]

(uppercase B - Angular2 templates are case sensitive)

answered Jun 22, 2016 at 14:42

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fiona Over a year ago

DOH! Face-palm. Thanks for your patience!

Katharine Osborne Over a year ago

I just spent 3 hours trying to figure out why my boolean input wasn't respecting the booleaness of the input (I was missing the square brackets). Thanks for the simple example.

Collectives™ on Stack Overflow

Angular2: pass boolean to @Input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related