Angular2 form field does not toggle on @input variable

Question

In Angular2 I have a very simple form:

Form.ts

import {Component, Input} from 'angular2/core'

@Component({
  selector: 'my-form',
  providers: [],
  template: `
    <form>

      {{ details }}

      <input type="text" placeholder="name" />
      <input *ngIf="details" type="text" placeholder="details" />
    </form>
  `,
  directives: []
})
export class MyForm {

  @Input() details: bool;

  constructor() {

  }
}

As shown in this Plunkr, when I toggle the details @input via the button, the text changes between true and false.

However the *ngIf isn't toggling the textfield at all.

Any thoughts on what I miss here?

App.ts

import {Component} from 'angular2/core'
import {MyForm} from './form'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <button (click)="toggle()">toggle details</button>
      <my-form details="{{visible}}"></my-form>
    </div>
  `,
  directives: [MyForm]
})
export class App {

  visible: boolean = false;

  constructor() {
    this.name = 'Angular2'
  }

  toggle() {
    this.visible = !this.visible;
  }
}

Thierry Templier · Accepted Answer · 2016-03-25 09:46:14Z

3

You should use the following instead:

<my-form [details]="visible"></my-form>

instead of

<my-form details="{{visible}}"></my-form>

This allows to use property binding, i.e. one way binding (by reference). This means that when the provided expression changes, the sub component can see the update.

In your case, you simply intialize the input of the sub component with the value of the expression visible using interpolation. But then your sub component won't see updates.

Moreover in your case, you provide a string and not a boolean. Only property binding allows to provide types different than string...

See the working plunkr: https://plnkr.co/edit/z7rKGb6mLdLNj2jtSlcU?p=preview.

edited Mar 25, 2016 at 9:46

answered Mar 25, 2016 at 9:39

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

2 Comments

Bas van Dijk Over a year ago

A small additional question: If I have e.g. 100 instances of my form and want each button to toggle the matching textbox. What is the best practice for this? I have created a Plunkr example at plnkr.co/edit/n8TZjpQgjg1YH7TefPkM?p=preview

Mark Rajcok Over a year ago

"you simply initialize the input of the sub component with the value of the expression visible using interpolation. But then your sub component won't see updates." -- Not true. The child component will see updates when {{}} binding is used. It's just that {{template_expression}} binding always converts the template_expression to a string, then that string result is assigned to the input property. See Günter's answer.

Günter Zöchbauer · Accepted Answer · 2016-03-25 09:40:00Z

1

Use instead

<my-form [details]="visible"></my-form>

Plunker

<my-form details="{{visible}}"></my-form>

passes 'true' to visible (stringifies). With [details] the unmodified value is passed. Therefore this form has to be used if you want to pass anything different than a string.

answered Mar 25, 2016 at 9:40

Günter Zöchbauer

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

1 Comment

Mark Rajcok Over a year ago

Why was this downvoted? (I just upvoted it). This answer is more correct than Thierry's.

Collectives™ on Stack Overflow

Angular2 form field does not toggle on @input variable

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related