Ggtcf

What would happen to a modern skyscraper if it rains micro blackholes?

What defenses are there against being summoned by the Gate spell?

Writing rule stating superpower from different root cause is bad writing

Minkowski space

How to find program name(s) of an installed package?

What typically incentivizes a professor to change jobs to a lower ranking university?

Why are electrically insulating heatsinks so rare? Is it just cost?

How can I make my BBEG immortal short of making them a Lich or Vampire?

How much RAM could one put in a typical 80386 setup?

Collect Fourier series terms

What do the dots in this tr command do: tr .............A-Z A-ZA-Z <<< "JVPQBOV" (with 13 dots)

How to write a macro that is braces sensitive?

Is it tax fraud for an individual to declare non-taxable revenue as taxable income? (US tax laws)

Why doesn't Newton's third law mean a person bounces back to where they started when they hit the ground?

Arthur Somervell: 1000 Exercises - Meaning of this notation

Test if tikzmark exists on same page

"You are your self first supporter", a more proper way to say it

Font hinting is lost in Chrome-like browsers (for some languages )

Dragon forelimb placement

In Japanese, what’s the difference between “Tonari ni” (となりに) and “Tsugi” (つぎ)? When would you use one over the other?

I’m planning on buying a laser printer but concerned about the life cycle of toner in the machine

Why does Kotter return in Welcome Back Kotter?

What is the offset in a seaplane's hull?

tikz: show 0 at the axis origin

Angular 2 - 2 Way Binding with NgModel in NgFor

ngModel inside two ngFor - Angular/Ionicnext value changes on the screen when changing a list of numbersAngular unique values for different rows NgModelAngular 4 - “Can't bind to 'ngModel' since it isn't a known property of 'input' ” errorAngular 2 form with array of object inputsAngular binding object with array from component to view with ngModelsAngular 5 - Strange behaviour with input text and ngModelTwo way data binding an array angular 6`ngModel` not working properly when bind to an input tag in ngFor, It loose focus when i start typingAngular ngModel in ngFor binding to the same ModelAngular HTML bindingCan't bind to 'ngModel' since it isn't a known property of 'input'Angular 2: “Can't bind to 'ngModel'” error when FormsModule is imported in app.moduleAngular2 (final version) *ngFor in component: Can't bind to 'ngForOf' since it isn't a known property of 'div'Angular Can't bind to 'ngModel' since it isn't a known property ofangular 4 material show formArrayName with ngFor and ngModelNested *ngFor in Angular 2Angular 5 bind to a custom propertiesDynamic binding ngModel in ngFor loopAngular: common way to bind a input-variable

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

29

9

In Angular 2 how would I get 2 way binding with NgModel within a repeating list using NgFor. Below is my plunkr and code but I get an error.

Plunkr

@Component(
 selector: 'my-app',
 template: `
 <div>
 <div *ngFor="let item of toDos;let index = index;">
 <input [(ngModel)]="item" placeholder="item">
 </div>
 Below Should be binded to above input box
 <div *ngFor="let item of toDos">
 <label>item</label>
 </div>
 </div>
 `,
 directives: [MdButton, MdInput]
)
export class AppComponent 
 toDos: string[] =["Todo1","Todo2","Todo3"];
 constructor() 
 ngOnInit() 
 

angular typescript

share|improve this question

edited Oct 28 '18 at 17:33

displayname

6,6681785178

asked Oct 29 '16 at 0:06

Ka TechKa Tech

2,71793149

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You get an error because you can't do this: ``` <input [(ngModel)]="item" placeholder="item"> ``` You can't bind ng-model to the reference variable "item." I am not sure what you are trying to accomplish. Can you elaborate?
  
  – Ben Richards
  Oct 29 '16 at 0:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It is ok I found the solution I need to include trackByIndex then bind to toDos [index] instead. will update plunkr shortly.
  
  – Ka Tech
  Oct 29 '16 at 0:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Just post an answer :-)
  
  – Paul Samsotha
  Oct 29 '16 at 1:36
  

  
  
  
  

add a comment | 

29

9

In Angular 2 how would I get 2 way binding with NgModel within a repeating list using NgFor. Below is my plunkr and code but I get an error.

Plunkr

@Component(
 selector: 'my-app',
 template: `
 <div>
 <div *ngFor="let item of toDos;let index = index;">
 <input [(ngModel)]="item" placeholder="item">
 </div>
 Below Should be binded to above input box
 <div *ngFor="let item of toDos">
 <label>item</label>
 </div>
 </div>
 `,
 directives: [MdButton, MdInput]
)
export class AppComponent 
 toDos: string[] =["Todo1","Todo2","Todo3"];
 constructor() 
 ngOnInit() 
 

angular typescript

share|improve this question

edited Oct 28 '18 at 17:33

displayname

6,6681785178

asked Oct 29 '16 at 0:06

Ka TechKa Tech

2,71793149

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You get an error because you can't do this: ``` <input [(ngModel)]="item" placeholder="item"> ``` You can't bind ng-model to the reference variable "item." I am not sure what you are trying to accomplish. Can you elaborate?
  
  – Ben Richards
  Oct 29 '16 at 0:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It is ok I found the solution I need to include trackByIndex then bind to toDos [index] instead. will update plunkr shortly.
  
  – Ka Tech
  Oct 29 '16 at 0:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Just post an answer :-)
  
  – Paul Samsotha
  Oct 29 '16 at 1:36
  

  
  
  
  

add a comment | 

In Angular 2 how would I get 2 way binding with NgModel within a repeating list using NgFor. Below is my plunkr and code but I get an error.

Plunkr

@Component(
 selector: 'my-app',
 template: `
 <div>
 <div *ngFor="let item of toDos;let index = index;">
 <input [(ngModel)]="item" placeholder="item">
 </div>
 Below Should be binded to above input box
 <div *ngFor="let item of toDos">
 <label>item</label>
 </div>
 </div>
 `,
 directives: [MdButton, MdInput]
)
export class AppComponent 
 toDos: string[] =["Todo1","Todo2","Todo3"];
 constructor() 
 ngOnInit() 
 

angular typescript

share|improve this question

edited Oct 28 '18 at 17:33

displayname

6,6681785178

asked Oct 29 '16 at 0:06

Ka TechKa Tech

2,71793149

@Component(
 selector: 'my-app',
 template: `
 <div>
 <div *ngFor="let item of toDos;let index = index;">
 <input [(ngModel)]="item" placeholder="item">
 </div>
 Below Should be binded to above input box
 <div *ngFor="let item of toDos">
 <label>item</label>
 </div>
 </div>
 `,
 directives: [MdButton, MdInput]
)
export class AppComponent 
 toDos: string[] =["Todo1","Todo2","Todo3"];
 constructor() 
 ngOnInit() 
 

angular typescript

angular typescript

share|improve this question

edited Oct 28 '18 at 17:33

displayname

6,6681785178

asked Oct 29 '16 at 0:06

Ka TechKa Tech

2,71793149

share|improve this question

edited Oct 28 '18 at 17:33

displayname

6,6681785178

asked Oct 29 '16 at 0:06

Ka TechKa Tech

2,71793149

edited Oct 28 '18 at 17:33

displayname

6,6681785178

edited Oct 28 '18 at 17:33

displayname

6,6681785178

asked Oct 29 '16 at 0:06

Ka TechKa Tech

2,71793149

asked Oct 29 '16 at 0:06

Ka TechKa Tech

2,71793149

3 Answers
3

active

oldest

votes

61

After digging around I need to use trackBy on ngFor. Updated plnkr and code below. Hope this helps others.

Working Plnkr

@Component(
 selector: 'my-app',
 template: `
 <div>
 <div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">
 <input [(ngModel)]="toDos[index]" placeholder="item">
 </div>
 Below Should be binded to above input box
 <div *ngFor="let item of toDos">
 <label>item</label>
 </div>
 </div>
 `,
 directives: [MdButton, MdInput]
)
export class AppComponent 
 toDos: string[] =["Todo1","Todo2","Todo3"];
 constructor() 
 ngOnInit() 
 
 trackByIndex(index: number, obj: any): any 
 return index;
 

share|improve this answer

answered Oct 29 '16 at 3:16

Ka TechKa Tech

2,71793149

• 
  
  
  

  
  19
  

  
  
  
  
  
  

  
  
  Actually the trackBy does not matter in your code! What matters is [(ngModel)]="toDos[index]" instead of [(ngModel)]="item"
  
  – Lars
  Mar 1 '17 at 7:36
  

  
  
  
  


• 
  
  
  

  
  10
  

  
  
  
  
  
  

  
  
  @Lars without the trackBy the input loses focus and seems to hang in my experience.
  
  – Reed
  Jan 31 '18 at 22:28
  

  
  
  
  


• 
  
  
  

  
  7
  

  
  
  
  
  
  

  
  
  Without the trackBy ngFor re-creates the DOM every time you change a string in your array, so this is totally necessary.
  
  – Marc J. Schmidt
  Mar 22 '18 at 2:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Ka Tech Provided plunker has errors
  
  – Imants Volkovs
  Apr 11 '18 at 9:02
  

  
  
  
  

add a comment | 

25

What you have done is not working because of two reasons.

• You have to use toDos[index] instead of item with ngModel (Read for more info)


• Each input has to have a unique name

Here's the working solution for your problem.

<div>
<div *ngFor="let item of toDos;let index = index;">
 <input name=aindex [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
 <label>item</label>
</div>

share|improve this answer

edited Nov 30 '17 at 15:59

answered Nov 30 '17 at 7:17

Lasitha YapaLasitha Yapa

1,41722236

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I searched multiple questions until I got the answer from this one. My problem was "Each input has to have an unique name". This was exactly what I needed!
  
  – Brian Bauman
  Jul 4 '18 at 3:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Glad I could help
  
  – Lasitha Yapa
  Jul 4 '18 at 6:26
  

  
  
  
  

add a comment | 

-1

Try this

@Component(
 selector: 'my-app',
 template: `
 <div>
 <div *ngFor="let item of toDos;let index = index;">
 <input [(ngModel)]="item.text" placeholder="item.text">
 </div>
 Below Should be binded to above input box
 <div *ngFor="let item of toDos">
 <label>item.text</label>
 </div>
 </div>
 `,
 directives: [MdButton, MdInput]
 )
export class AppComponent 
 toDos: any[] =[text:"Todo1",text:"Todo2",text:"Todo3"];
 constructor() 
 ngOnInit() 
 

share|improve this answer

edited Jan 14 at 21:31

Simone Nigro

2,62621746

answered Dec 30 '18 at 15:27

VickyVicky

494

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Down voting for below reasons : 1. Adding a key to the array is not required. Can be done using an array of string as well. So redundancy. 2. "trackBy:trackByIndex;" is a necessity in this case because if the an input is changed it will change the value of "toDos" array which will in-turn re-render the complete "ngFor". Using "trackBy:trackByIndex;" will not allow the re-rendering as because of this code ngFor will re-render only when the indexes will change.
  
  – Suyash Gulati
  Mar 27 at 14:03
  
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f40314732%2fangular-2-2-way-binding-with-ngmodel-in-ngfor%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

61

After digging around I need to use trackBy on ngFor. Updated plnkr and code below. Hope this helps others.

Working Plnkr

@Component(
 selector: 'my-app',
 template: `
 <div>
 <div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">
 <input [(ngModel)]="toDos[index]" placeholder="item">
 </div>
 Below Should be binded to above input box
 <div *ngFor="let item of toDos">
 <label>item</label>
 </div>
 </div>
 `,
 directives: [MdButton, MdInput]
)
export class AppComponent 
 toDos: string[] =["Todo1","Todo2","Todo3"];
 constructor() 
 ngOnInit() 
 
 trackByIndex(index: number, obj: any): any 
 return index;
 

share|improve this answer

answered Oct 29 '16 at 3:16

Ka TechKa Tech

2,71793149

• 
  
  
  

  
  19
  

  
  
  
  
  
  

  
  
  Actually the trackBy does not matter in your code! What matters is [(ngModel)]="toDos[index]" instead of [(ngModel)]="item"
  
  – Lars
  Mar 1 '17 at 7:36
  

  
  
  
  


• 
  
  
  

  
  10
  

  
  
  
  
  
  

  
  
  @Lars without the trackBy the input loses focus and seems to hang in my experience.
  
  – Reed
  Jan 31 '18 at 22:28
  

  
  
  
  


• 
  
  
  

  
  7
  

  
  
  
  
  
  

  
  
  Without the trackBy ngFor re-creates the DOM every time you change a string in your array, so this is totally necessary.
  
  – Marc J. Schmidt
  Mar 22 '18 at 2:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Ka Tech Provided plunker has errors
  
  – Imants Volkovs
  Apr 11 '18 at 9:02
  

  
  
  
  

add a comment | 

61

After digging around I need to use trackBy on ngFor. Updated plnkr and code below. Hope this helps others.

Working Plnkr

@Component(
 selector: 'my-app',
 template: `
 <div>
 <div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">
 <input [(ngModel)]="toDos[index]" placeholder="item">
 </div>
 Below Should be binded to above input box
 <div *ngFor="let item of toDos">
 <label>item</label>
 </div>
 </div>
 `,
 directives: [MdButton, MdInput]
)
export class AppComponent 
 toDos: string[] =["Todo1","Todo2","Todo3"];
 constructor() 
 ngOnInit() 
 
 trackByIndex(index: number, obj: any): any 
 return index;
 

share|improve this answer

answered Oct 29 '16 at 3:16

Ka TechKa Tech

2,71793149

• 
  
  
  

  
  19
  

  
  
  
  
  
  

  
  
  Actually the trackBy does not matter in your code! What matters is [(ngModel)]="toDos[index]" instead of [(ngModel)]="item"
  
  – Lars
  Mar 1 '17 at 7:36
  

  
  
  
  


• 
  
  
  

  
  10
  

  
  
  
  
  
  

  
  
  @Lars without the trackBy the input loses focus and seems to hang in my experience.
  
  – Reed
  Jan 31 '18 at 22:28
  

  
  
  
  


• 
  
  
  

  
  7
  

  
  
  
  
  
  

  
  
  Without the trackBy ngFor re-creates the DOM every time you change a string in your array, so this is totally necessary.
  
  – Marc J. Schmidt
  Mar 22 '18 at 2:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Ka Tech Provided plunker has errors
  
  – Imants Volkovs
  Apr 11 '18 at 9:02
  

  
  
  
  

add a comment | 

After digging around I need to use trackBy on ngFor. Updated plnkr and code below. Hope this helps others.

Working Plnkr

@Component(
 selector: 'my-app',
 template: `
 <div>
 <div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">
 <input [(ngModel)]="toDos[index]" placeholder="item">
 </div>
 Below Should be binded to above input box
 <div *ngFor="let item of toDos">
 <label>item</label>
 </div>
 </div>
 `,
 directives: [MdButton, MdInput]
)
export class AppComponent 
 toDos: string[] =["Todo1","Todo2","Todo3"];
 constructor() 
 ngOnInit() 
 
 trackByIndex(index: number, obj: any): any 
 return index;
 

share|improve this answer

answered Oct 29 '16 at 3:16

Ka TechKa Tech

2,71793149

@Component(
 selector: 'my-app',
 template: `
 <div>
 <div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">
 <input [(ngModel)]="toDos[index]" placeholder="item">
 </div>
 Below Should be binded to above input box
 <div *ngFor="let item of toDos">
 <label>item</label>
 </div>
 </div>
 `,
 directives: [MdButton, MdInput]
)
export class AppComponent 
 toDos: string[] =["Todo1","Todo2","Todo3"];
 constructor() 
 ngOnInit() 
 
 trackByIndex(index: number, obj: any): any 
 return index;
 

share|improve this answer

answered Oct 29 '16 at 3:16

Ka TechKa Tech

2,71793149

answered Oct 29 '16 at 3:16

Ka TechKa Tech

2,71793149

answered Oct 29 '16 at 3:16

Ka TechKa Tech

2,71793149

25

What you have done is not working because of two reasons.

• You have to use toDos[index] instead of item with ngModel (Read for more info)


• Each input has to have a unique name

Here's the working solution for your problem.

<div>
<div *ngFor="let item of toDos;let index = index;">
 <input name=aindex [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
 <label>item</label>
</div>

share|improve this answer

edited Nov 30 '17 at 15:59

answered Nov 30 '17 at 7:17

Lasitha YapaLasitha Yapa

1,41722236

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I searched multiple questions until I got the answer from this one. My problem was "Each input has to have an unique name". This was exactly what I needed!
  
  – Brian Bauman
  Jul 4 '18 at 3:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Glad I could help
  
  – Lasitha Yapa
  Jul 4 '18 at 6:26
  

  
  
  
  

add a comment | 

25

What you have done is not working because of two reasons.

• You have to use toDos[index] instead of item with ngModel (Read for more info)


• Each input has to have a unique name

Here's the working solution for your problem.

<div>
<div *ngFor="let item of toDos;let index = index;">
 <input name=aindex [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
 <label>item</label>
</div>

share|improve this answer

edited Nov 30 '17 at 15:59

answered Nov 30 '17 at 7:17

Lasitha YapaLasitha Yapa

1,41722236

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I searched multiple questions until I got the answer from this one. My problem was "Each input has to have an unique name". This was exactly what I needed!
  
  – Brian Bauman
  Jul 4 '18 at 3:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Glad I could help
  
  – Lasitha Yapa
  Jul 4 '18 at 6:26
  

  
  
  
  

add a comment | 

What you have done is not working because of two reasons.

• You have to use toDos[index] instead of item with ngModel (Read for more info)


• Each input has to have a unique name

Here's the working solution for your problem.

<div>
<div *ngFor="let item of toDos;let index = index;">
 <input name=aindex [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
 <label>item</label>
</div>

share|improve this answer

edited Nov 30 '17 at 15:59

answered Nov 30 '17 at 7:17

Lasitha YapaLasitha Yapa

1,41722236

<div>
<div *ngFor="let item of toDos;let index = index;">
 <input name=aindex [(ngModel)]="toDos[index]" placeholder="item">
</div>
Below Should be binded to above input box
<div *ngFor="let item of toDos">
 <label>item</label>
</div>

share|improve this answer

edited Nov 30 '17 at 15:59

answered Nov 30 '17 at 7:17

Lasitha YapaLasitha Yapa

1,41722236

answered Nov 30 '17 at 7:17

Lasitha YapaLasitha Yapa

1,41722236

answered Nov 30 '17 at 7:17

Lasitha YapaLasitha Yapa

1,41722236

-1

Try this

@Component(
 selector: 'my-app',
 template: `
 <div>
 <div *ngFor="let item of toDos;let index = index;">
 <input [(ngModel)]="item.text" placeholder="item.text">
 </div>
 Below Should be binded to above input box
 <div *ngFor="let item of toDos">
 <label>item.text</label>
 </div>
 </div>
 `,
 directives: [MdButton, MdInput]
 )
export class AppComponent 
 toDos: any[] =[text:"Todo1",text:"Todo2",text:"Todo3"];
 constructor() 
 ngOnInit() 
 

share|improve this answer

edited Jan 14 at 21:31

Simone Nigro

2,62621746

answered Dec 30 '18 at 15:27

VickyVicky

494

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Down voting for below reasons : 1. Adding a key to the array is not required. Can be done using an array of string as well. So redundancy. 2. "trackBy:trackByIndex;" is a necessity in this case because if the an input is changed it will change the value of "toDos" array which will in-turn re-render the complete "ngFor". Using "trackBy:trackByIndex;" will not allow the re-rendering as because of this code ngFor will re-render only when the indexes will change.
  
  – Suyash Gulati
  Mar 27 at 14:03
  
  

  
  
  
  

add a comment | 

-1

Try this

@Component(
 selector: 'my-app',
 template: `
 <div>
 <div *ngFor="let item of toDos;let index = index;">
 <input [(ngModel)]="item.text" placeholder="item.text">
 </div>
 Below Should be binded to above input box
 <div *ngFor="let item of toDos">
 <label>item.text</label>
 </div>
 </div>
 `,
 directives: [MdButton, MdInput]
 )
export class AppComponent 
 toDos: any[] =[text:"Todo1",text:"Todo2",text:"Todo3"];
 constructor() 
 ngOnInit() 
 

share|improve this answer

edited Jan 14 at 21:31

Simone Nigro

2,62621746

answered Dec 30 '18 at 15:27

VickyVicky

494

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Down voting for below reasons : 1. Adding a key to the array is not required. Can be done using an array of string as well. So redundancy. 2. "trackBy:trackByIndex;" is a necessity in this case because if the an input is changed it will change the value of "toDos" array which will in-turn re-render the complete "ngFor". Using "trackBy:trackByIndex;" will not allow the re-rendering as because of this code ngFor will re-render only when the indexes will change.
  
  – Suyash Gulati
  Mar 27 at 14:03
  
  

  
  
  
  

add a comment | 

Try this

@Component(
 selector: 'my-app',
 template: `
 <div>
 <div *ngFor="let item of toDos;let index = index;">
 <input [(ngModel)]="item.text" placeholder="item.text">
 </div>
 Below Should be binded to above input box
 <div *ngFor="let item of toDos">
 <label>item.text</label>
 </div>
 </div>
 `,
 directives: [MdButton, MdInput]
 )
export class AppComponent 
 toDos: any[] =[text:"Todo1",text:"Todo2",text:"Todo3"];
 constructor() 
 ngOnInit() 
 

share|improve this answer

edited Jan 14 at 21:31

Simone Nigro

2,62621746

answered Dec 30 '18 at 15:27

VickyVicky

494

@Component(
 selector: 'my-app',
 template: `
 <div>
 <div *ngFor="let item of toDos;let index = index;">
 <input [(ngModel)]="item.text" placeholder="item.text">
 </div>
 Below Should be binded to above input box
 <div *ngFor="let item of toDos">
 <label>item.text</label>
 </div>
 </div>
 `,
 directives: [MdButton, MdInput]
 )
export class AppComponent 
 toDos: any[] =[text:"Todo1",text:"Todo2",text:"Todo3"];
 constructor() 
 ngOnInit() 
 

share|improve this answer

edited Jan 14 at 21:31

Simone Nigro

2,62621746

answered Dec 30 '18 at 15:27

VickyVicky

494

edited Jan 14 at 21:31

Simone Nigro

2,62621746

edited Jan 14 at 21:31

Simone Nigro

2,62621746

answered Dec 30 '18 at 15:27

VickyVicky

494

answered Dec 30 '18 at 15:27

VickyVicky

494