Binding an input to component in angular

Question

I'm not having much luck in understanding angular. I have set up this simple test:https://stackblitz.com/edit/stackoverflow-q-54317647-ocxugf?file=app%2Fmy.component.spec.ts.

I set the component value input.value = "aaaa"; in the test and it shows up in the front end. If I change the value by typing a different text the value in the input component value does not seem to be updating.

you need to learn angular data binding approaches first, the simple test you mentioned shows that. for example you making event binding with disabled property (disabled) and that is wrong you need to use property binding instead with [disabled]. — Mahmoud Fawzy
– Mahmoud Fawzy, Commented Feb 2, 2019 at 6:35
if you want to use data binding with input the easiest way is two way data binding [(ngModel)] banana in the box that bind data from/to both sides — Mahmoud Fawzy
– Mahmoud Fawzy, Commented Feb 2, 2019 at 6:37

Balaj Khan · Accepted Answer · 2019-02-03 08:21:55Z

6

You need to use [(ngModel)] for two-way data binding.

<input [(ngModel)]="test" name="test" />

Now if you type any value in input your value will change in test variable. And if you want to have a predefined value in input field you can set the test variable value where you declared the variable like below.

test: string = 'aaa';

Here is an example

In ts file:

import { Component, OnInit, OnChanges, Input } from '@angular/core';


@Component({
  templateUrl: './my.component.html'
})

export class MyComponent implements OnInit {

  test: string;

  constructor() {}
  ngOnInit() {
  }

  printValue() {
    console.log(this.test);
  }
}

In HTML:

<input name="test" [(ngModel)]="test" id="test" />
<br/>
<button (click)="printValue()">Button</button>

edited Feb 3, 2019 at 8:21

answered Feb 2, 2019 at 7:13

Balaj Khan

2,6103 gold badges20 silver badges30 bronze badges

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

3 Comments

fastcodejava Over a year ago

It did not work, I click on the button it still prints undefined in the console.

fastcodejava Over a year ago

It works now : stackblitz.com/edit/…. I don't know why the previous example did not work.

herrstress Sep 29 at 9:08

Actually it cannot even start ;). So what is missing there? (For me no way works right now which should be a bug in VS Code or Angular itself...): Error: "Can't bind to 'ngModel' since it isn't a known property of 'input'"

Collectives™ on Stack Overflow

Binding an input to component in angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related