ngModel cant bind to async property Angular

angular async data binding
ngif async boolean
angular, async pipe as variable
angular async loading
ngif async multiple conditions
angular async pipe ngfor
can't bind to 'ngmodel' since it isn't a known property of 'input'
angular async pipe ng template

I have an issue, now when I start my app I have an async call like so..

getData() {
   this._dataService.getData().subscribe((result) => {
     this.data = result
   })
}

now the data I get back looks something like this

data = {
    value1: null,
    value2: null,
    value3: null,
    value4: null,
    value5: null,
    etc..
}

now in my HTML I'm doing this..

<input [(ngModel)]="data.value1" />
<input [(ngModel)]="data.value2" />

etc..

so when I run my app, I get errors saying cant bind to undefined meaning that when the page renders data hasnt been retrieved yet

now normally I would do something like this...

<input [(ngModel)]="data?.value2" />

but I get this error Parser Error: The '?.' operator cannot be used in the assignment

is there anyway around this?

I dont really want to do the following

setData() {
   this.value1 = this.data.value1;
   etc...
}

Try to wrap your input inside a *ngIf="data".

<form *ngIf="data">
    <input [(ngModel)]="data.value1" />
    <input [(ngModel)]="data.value2" />
</form>

Angular Async Data Binding with ngIf and ngElse, In our template, we can simply bind directly to our user property. <div> <h2>{{​user?.firstName}}  Are you looking for a quick solution for Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’ error? Solution 1: Import FormsModule to your app.module.ts or to your component module if you are lazy loading. Solution 2:


I think you need to initialize the data object at first.

data = {
    value1: null,
    value2: null,
    value3: null,
    value4: null,
    value5: null, 
}

getData() {
   this._dataService.getData().subscribe((result) => {
     this.data = result
   })
}

Learn Angular: The Collection, concurrency [ [ [ [ Can't bind to 'ng Model' since it isn't a known property of no-​unused-variable */ import { TestB ed, async } from 'Gangular/core/testing';  Async Pipe and the Share Operator. Another way to bind to async data in Angular is to use the async pipe. With the Async pipe, we get the benefit of Angular auto-subscribing and unsubscribing with our Observables when the component is created and destroyed. To use the async pipe, we bind our Observable directly to our component.


You have to check the getData method. result object can be undefined. you have to check it first. use console.log or network tab in the browser and check the response.

getData() {
   this._dataService.getData().subscribe((result) => {

     console.log(result)
     this.data = result 

   })
}

however you can simply do this for working. this will work but not the correct way.

getData() {
   this._dataService.getData().subscribe((result) => {


     this.data = result?result:this.data 

   })
}

Can't bind to 'ngModel' since it isn't a known property of 'input , I get Can't bind to 'ngModel' since it isn't a known property of 'input' in Angular 2 when import { TestBed, async } from '@angular/core/testing';. To inspect the properties of the associated FormControl (like validity state), export the directive into a local template variable using ngModel as the key (ex: #myVar="ngModel"). You then access the control using the directive's control property, but most properties used (like valid and dirty ) fall through to the control anyway for direct access.


Learn Angular: Build a Todo App, the following error: Can't bind to 'ng Model" since it isn't a known property of no-unused—variable */ import { Test Bed, async } from 'Gangular/core/testing';  The tool provided by angular called directive which is known as ngModel within square bracket and the parenthesis is used on the input html tag, basically to get whatever you type in the input text box and store it in the model called “name”.


FormControlName, Tracks the name of the FormControl bound to the directive. Support for using the ngModel input property and ngModelChange event with reactive form  We will use two-way binding with NgModel in text box and select box in our example. [(ngModel)] can set only data-bound property. To use NgModel we need to import FormsModule and add it to imports attribute of @NgModule in our module file. Now for the example of two-way data binding using NgModel find the code snippet.


Template syntax, Change detection cycles are triggered by many asynchronous activities such as promise You can't use property binding to read or pull values out of target elements. NgModel —adds two-way data binding to an HTML form element. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’ “It's shocking the @w3c didn't use @greensock as a model of how to do animation via code. Did they even ask animators what they use?”