1

I wrote this component:

@Component({
    selector: 'formfield',
    template: `
        <div>
            <label>{{label}}</label>
            <div>
                <input class="form-control" type="text" [(ngModel)]="model">
            </div>
        </div>
`
})
export class Formfield {
    @Input() label: string;
    @Input() model: string;
}

I use it here:

<formfield label="something" model="somevalue"></formfield>

Not surprisingly the input field shows the string "somevalue". How can I make it to hold the value of the variable somevalue?

Galdor
  • 1,636
  • 4
  • 23
  • 37
  • Possible duplicate of [Angular 2 ngModel in child component updates parent component property](http://stackoverflow.com/questions/35327929/angular-2-ngmodel-in-child-component-updates-parent-component-property) – Mark Rajcok Jun 08 '16 at 18:21
  • http://stackoverflow.com/questions/35327929/angular-2-ngmodel-in-child-component-updates-parent-component-property – Galdor Jul 04 '16 at 12:47

1 Answers1

0

You need to use the following:

<formfield label="something" [model]="someprop"></formfield>

where someprop is a property of the component that uses the formfield component.

For example:

@Component({
  (...)
})
export class SomeComponent {
  someprop:string = 'some value';
}
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • This works just half way. A change on the input field only affects the value of model but not the value of someprop. – Galdor Jun 07 '16 at 06:58
  • model is just an @Input property, I would need something like `@InputOutput () model` – Galdor Jun 07 '16 at 07:06