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!
It should be
[showButton1]
instead of
[showbutton1]
(uppercase B
- Angular2 templates are case sensitive)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With