Angular2: pass boolean to @Input

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!

Best Answer

It should be

[showButton1]

instead of

[showbutton1]

(uppercase B - Angular2 templates are case sensitive)

Related Solutions

Angular – How to inject a parent component into a child component

See @EricMartinez's comment for the answer. The problem seems to be a circular reference when A imports B and B imports A.

Here's a plunker that uses two files instead of the one file that is in Eric's plunker.

The only change from my original plunker is in the ChildComponent:

import {Component, Inject, forwardRef} from 'angular2/core';
// ....
constructor(@Inject(forwardRef(() => AppComponent)) private _parent:AppComponent)

I don't know for sure if this eliminates the circular reference, since A and B are still importing each other, but it seems to work.

See also https://github.com/angular/angular/issues/3216, where Miško states:

This [not user-friendly declaration using forwardRef()] is a limitation of JS and how the function declarations get hoisted. Whenever you have a circular dependency you will need forwardRef :-( I just don't see a away around it.

I would argue that you should not be in situation where your parent needs to know about the children and children need to know about parent. @Query should take care of most of the use cases.

I am sorry, but while I agree this is a pain in some rare cases, I don't see a way out of it, and hence this issue is not actionable, will close.

Hmm... the reason I tried injecting the parent was because I see two ways for a child to communicate with a parent:

the child defines output properties and emits events, which the parent subscribes to
the child injects the parent (e.g., Pane might inject Tabs) and can then call methods on the parent

And I was trying to determine when to use each approach. Miško makes it sound like 2. should be rare.

Update: I was thinking about this some more... 1. is better because there is less coupling between the child and the parent. With 1. the child doesn't need to know (and probably shouldn't know) the public API/interface of the parent.
In the reverse direction (e.g., the parent uses @ViewChild (@Query is now deprecated) to get a reference to the child, then calls methods on the child), the coupling is fine, because the parent is using the child component, so it needs to know the public API/interface of the child: i.e., the input and output properties and public methods.

Angular 2 @ViewChild annotation returns undefined

I had a similar issue and thought I'd post in case someone else made the same mistake. First, one thing to consider is AfterViewInit; you need to wait for the view to be initialized before you can access your @ViewChild. However, my @ViewChild was still returning null. The problem was my *ngIf. The *ngIf directive was killing my controls component so I couldn't reference it.

import {Component, ViewChild, OnInit, AfterViewInit} from 'angular2/core';
import {ControlsComponent} from './controls/controls.component';
import {SlideshowComponent} from './slideshow/slideshow.component';

@Component({
    selector: 'app',
    template:  `
        <controls *ngIf="controlsOn"></controls>
        <slideshow (mousemove)="onMouseMove()"></slideshow>
    `,
    directives: [SlideshowComponent, ControlsComponent]
})

export class AppComponent {
    @ViewChild(ControlsComponent) controls:ControlsComponent;

    controlsOn:boolean = false;

    ngOnInit() {
        console.log('on init', this.controls);
        // this returns undefined
    }

    ngAfterViewInit() {
        console.log('on after view init', this.controls);
        // this returns null
    }

    onMouseMove(event) {
         this.controls.show();
         // throws an error because controls is null
    }
}

Hope that helps.

EDIT
As mentioned by @Ashg below, a solution is to use @ViewChildren instead of @ViewChild.

Best Answer

Related Solutions

Angular – How to inject a parent component into a child component

Angular 2 @ViewChild annotation returns undefined

Related Topic