how to bind array in an object in angular 4 dynamicaly

Question

Hi i am having a json object and an arraylist inside it this.cars = [ { "carOwner": "foo", "carList": [ { "Name": "honda", "value": 2000 }, { "Name": "bmw", "value": 4440 } ] } ]; i have to bind name and value how can i bind array in an object

Kaushik Dhameliya · Answer

Hello Kartik You can use array this way div * ngFor = "let objCars of cars" > h1 > objCars.carOwner h1 > div * ngFor = "let objCarList of objCars.carList" > span > {{ objCarList.Name }} span > span > {{ objCarList.value }} span > div > div >

Manav Pandya · Answer

Hello Your question : How to generate dynamic textbox : Lets assume you have 2 items in array than you can do like below : div * ngFor = "let mycars of cars;let i=index" > div * ngFor = "let details of mycars.carList" > {{details.Name}} : input type = "text" value = "{{details.value}}" > br > br > div > div > Output I have developed complete CRUD operation using Array only - Add items into array , update item of array , than how to display array item and also delete it Just follow below link : https://www.c-sharpcorner.com/article/crud-using-array-in-angular-5/ I hope CRUD operation will help you to understand complete procedure to play with array Thanks

Manav Pandya · Answer

Hello Yes you are getting this bcoz name property set to be same for all Just make change as below : "text" value= "{{details.value}}" [ngModel]= "details.value" name={{details.value}}> Bcoz value of ngModel and name should be same to get exact value Thanks

Manav Pandya · Answer

Hello @Karthik If you just want to display than no need to use ngModel But yes if you want to do two-way data binding using [ngModel] like : "text" value= "{{details.value}}" [ngModel]= "details.value" > Just do R & D on this and you will get to know about that Thanks

Manav Pandya · Answer

Hello @Kaushik I have observed that you have copied my content and uploaded into your html file That's not the way to provide solution , i have implemented solution by my own , you can try with different ways @Kartik No need to use ngModel , i have provided runnable solution with output , check it out I hope you will find my answer helpful Thanks

Sujeet Raman · Answer

Got it..i need to show the value in a text box.but this text box shoud create dynamicaly based on how much name& value in the arraylist..how can i create dynamic text box based on number of "value"??as am new to angular facing issue..can u help on this also??

Sujeet Raman · Answer

@manav i used but still last value is binding all the textbox

Kaushik Dhameliya · Answer

Hello Karthik check this https://stackblitz.com/edit/errorhandle?file=app%2Fapp.component.ts

how to bind array in an object in angular 4 dynamicaly

Answers (8)