Two way binding in *ngFor on Array of elements(non-object)
I have a simple array tags = ; and I'm pushing blank element on addNew() using this.tags.push("");. It creates blank element in that array.
Now, I'm using this array to add multiple items to be added from the input
<div class="row tagEntry" *ngFor="let tag of tags, let i = index">
<div class="col-md-10">
<input type="text" name="tag-{{i}}" placeholder="Tag Name" [(ngModel)]="tag" class="form-control">
</div>
<div class="col-md-2">
<button class="btn btn-block btn-danger" (click)="removeTag(i)"><i class="fa fa-trash"></i></button>
</div>
</div>
My TS file:
todoDesc: string = '';
tags = ;
ngOnInit() {
}
addTag () {
this.tags.push("");
console.log(this.tags)
}
removeTag (index) {
this.tags.splice(index, 1);
}
addTodo () {
console.log(this.todoDesc, this.tags)
}
Issue here is, it is not binding the input and array two way. When I log the array after updating inputs, the array displays items with all blank value.
How to two way bind the array of elements in Angular 5 using *ngFor?
arrays angular angular5
asked Nov 14 '18 at 8:29
Faizan SaiyedFaizan Saiyed
15413
|
show 2 more comments
I have a simple array tags = ; and I'm pushing blank element on addNew() using this.tags.push("");. It creates blank element in that array.
Now, I'm using this array to add multiple items to be added from the input
<div class="row tagEntry" *ngFor="let tag of tags, let i = index">
<div class="col-md-10">
<input type="text" name="tag-{{i}}" placeholder="Tag Name" [(ngModel)]="tag" class="form-control">
</div>
<div class="col-md-2">
<button class="btn btn-block btn-danger" (click)="removeTag(i)"><i class="fa fa-trash"></i></button>
</div>
</div>
My TS file:
todoDesc: string = '';
tags = ;
ngOnInit() {
}
addTag () {
this.tags.push("");
console.log(this.tags)
}
removeTag (index) {
this.tags.splice(index, 1);
}
addTodo () {
console.log(this.todoDesc, this.tags)
}
Issue here is, it is not binding the input and array two way. When I log the array after updating inputs, the array displays items with all blank value.
How to two way bind the array of elements in Angular 5 using *ngFor?
arrays angular angular5
asked Nov 14 '18 at 8:29
Faizan SaiyedFaizan Saiyed
15413
You can useFormArrayor evenQuerySelectorto do that. The second way is more easy to understand
– Jacopo Sciampi
Nov 14 '18 at 8:31
And your TS part please ?
– selem mn
Nov 14 '18 at 8:32
@selemmn, updated the question
– Faizan Saiyed
Nov 14 '18 at 8:34
@FaizanSaiyed That is actually correct. tags array is a blank value array. Can you provide a sample at stackblitz.
– Jai
Nov 14 '18 at 8:36
@FaizanSaiyed and your addTag button in HTML :)
– selem mn
Nov 14 '18 at 8:39
|
show 2 more comments
I have a simple array tags = ; and I'm pushing blank element on addNew() using this.tags.push("");. It creates blank element in that array.
Now, I'm using this array to add multiple items to be added from the input
<div class="row tagEntry" *ngFor="let tag of tags, let i = index">
<div class="col-md-10">
<input type="text" name="tag-{{i}}" placeholder="Tag Name" [(ngModel)]="tag" class="form-control">
</div>
<div class="col-md-2">
<button class="btn btn-block btn-danger" (click)="removeTag(i)"><i class="fa fa-trash"></i></button>
</div>
</div>
My TS file:
todoDesc: string = '';
tags = ;
ngOnInit() {
}
addTag () {
this.tags.push("");
console.log(this.tags)
}
removeTag (index) {
this.tags.splice(index, 1);
}
addTodo () {
console.log(this.todoDesc, this.tags)
}
Issue here is, it is not binding the input and array two way. When I log the array after updating inputs, the array displays items with all blank value.
How to two way bind the array of elements in Angular 5 using *ngFor?
arrays angular angular5
asked Nov 14 '18 at 8:29
Faizan SaiyedFaizan Saiyed
15413
I have a simple array tags = ; and I'm pushing blank element on addNew() using this.tags.push("");. It creates blank element in that array.
Now, I'm using this array to add multiple items to be added from the input
<div class="row tagEntry" *ngFor="let tag of tags, let i = index">
<div class="col-md-10">
<input type="text" name="tag-{{i}}" placeholder="Tag Name" [(ngModel)]="tag" class="form-control">
</div>
<div class="col-md-2">
<button class="btn btn-block btn-danger" (click)="removeTag(i)"><i class="fa fa-trash"></i></button>
</div>
</div>
My TS file:
todoDesc: string = '';
tags = ;
ngOnInit() {
}
addTag () {
this.tags.push("");
console.log(this.tags)
}
removeTag (index) {
this.tags.splice(index, 1);
}
addTodo () {
console.log(this.todoDesc, this.tags)
}
Issue here is, it is not binding the input and array two way. When I log the array after updating inputs, the array displays items with all blank value.
How to two way bind the array of elements in Angular 5 using *ngFor?
arrays angular angular5
arrays angular angular5
asked Nov 14 '18 at 8:29
Faizan SaiyedFaizan Saiyed
15413
asked Nov 14 '18 at 8:29
Faizan SaiyedFaizan Saiyed
15413
edited Nov 14 '18 at 8:33
Faizan Saiyed
asked Nov 14 '18 at 8:29
Faizan SaiyedFaizan Saiyed
15413
asked Nov 14 '18 at 8:29
Faizan SaiyedFaizan Saiyed
15413
asked Nov 14 '18 at 8:29
Faizan SaiyedFaizan Saiyed
15413
15413
You can useFormArrayor evenQuerySelectorto do that. The second way is more easy to understand
– Jacopo Sciampi
Nov 14 '18 at 8:31
And your TS part please ?
– selem mn
Nov 14 '18 at 8:32
@selemmn, updated the question
– Faizan Saiyed
Nov 14 '18 at 8:34
@FaizanSaiyed That is actually correct. tags array is a blank value array. Can you provide a sample at stackblitz.
– Jai
Nov 14 '18 at 8:36
@FaizanSaiyed and your addTag button in HTML :)
– selem mn
Nov 14 '18 at 8:39
|
show 2 more comments
You can useFormArrayor evenQuerySelectorto do that. The second way is more easy to understand
– Jacopo Sciampi
Nov 14 '18 at 8:31
And your TS part please ?
– selem mn
Nov 14 '18 at 8:32
@selemmn, updated the question
– Faizan Saiyed
Nov 14 '18 at 8:34
@FaizanSaiyed That is actually correct. tags array is a blank value array. Can you provide a sample at stackblitz.
– Jai
Nov 14 '18 at 8:36
@FaizanSaiyed and your addTag button in HTML :)
– selem mn
Nov 14 '18 at 8:39
You can use
FormArray or even QuerySelector to do that. The second way is more easy to understand– Jacopo Sciampi
Nov 14 '18 at 8:31
You can use
FormArray or even QuerySelector to do that. The second way is more easy to understand– Jacopo Sciampi
Nov 14 '18 at 8:31
And your TS part please ?
– selem mn
Nov 14 '18 at 8:32
And your TS part please ?
– selem mn
Nov 14 '18 at 8:32
@selemmn, updated the question
– Faizan Saiyed
Nov 14 '18 at 8:34
@selemmn, updated the question
– Faizan Saiyed
Nov 14 '18 at 8:34
@FaizanSaiyed That is actually correct. tags array is a blank value array. Can you provide a sample at stackblitz.
– Jai
Nov 14 '18 at 8:36
@FaizanSaiyed That is actually correct. tags array is a blank value array. Can you provide a sample at stackblitz.
– Jai
Nov 14 '18 at 8:36
@FaizanSaiyed and your addTag button in HTML :)
– selem mn
Nov 14 '18 at 8:39
@FaizanSaiyed and your addTag button in HTML :)
– selem mn
Nov 14 '18 at 8:39
|
show 2 more comments
1 Answer
1
active
oldest
votes
The issue is with Array whose changes are not being detected through reference. You can make the following changes -
html
<div class="row tagEntry" *ngFor="let tag of tags; let i = index; trackBy:trackIndex">
<div class="col-md-10">
<input type="text" placeholder="Tag Name" [(ngModel)]="tags[i]" class="form-control">
</div>
<div class="col-md-2">
<button class="btn btn-block btn-danger" (click)="removeTag(i)"><i class="fa fa-trash"></i></button>
</div>
</div>
ts
Add the following function in ts file. This function is very important otherwise the array will re-build the complete UI on any change and you will loose the focus from the elememt.
trackIndex(index,item){
return index;
}
Here is the working copy - https://stackblitz.com/edit/angular-pzdw6s
answered Nov 14 '18 at 8:45
Sunil SinghSunil Singh
6,2322626
Thanks, that works!
– Faizan Saiyed
Nov 14 '18 at 8:46
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
});
}
});
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53295871%2ftwo-way-binding-in-ngfor-on-array-of-elementsnon-object%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The issue is with Array whose changes are not being detected through reference. You can make the following changes -
html
<div class="row tagEntry" *ngFor="let tag of tags; let i = index; trackBy:trackIndex">
<div class="col-md-10">
<input type="text" placeholder="Tag Name" [(ngModel)]="tags[i]" class="form-control">
</div>
<div class="col-md-2">
<button class="btn btn-block btn-danger" (click)="removeTag(i)"><i class="fa fa-trash"></i></button>
</div>
</div>
ts
Add the following function in ts file. This function is very important otherwise the array will re-build the complete UI on any change and you will loose the focus from the elememt.
trackIndex(index,item){
return index;
}
Here is the working copy - https://stackblitz.com/edit/angular-pzdw6s
answered Nov 14 '18 at 8:45
Sunil SinghSunil Singh
6,2322626
Thanks, that works!
– Faizan Saiyed
Nov 14 '18 at 8:46
add a comment |
The issue is with Array whose changes are not being detected through reference. You can make the following changes -
html
<div class="row tagEntry" *ngFor="let tag of tags; let i = index; trackBy:trackIndex">
<div class="col-md-10">
<input type="text" placeholder="Tag Name" [(ngModel)]="tags[i]" class="form-control">
</div>
<div class="col-md-2">
<button class="btn btn-block btn-danger" (click)="removeTag(i)"><i class="fa fa-trash"></i></button>
</div>
</div>
ts
Add the following function in ts file. This function is very important otherwise the array will re-build the complete UI on any change and you will loose the focus from the elememt.
trackIndex(index,item){
return index;
}
Here is the working copy - https://stackblitz.com/edit/angular-pzdw6s
answered Nov 14 '18 at 8:45
Sunil SinghSunil Singh
6,2322626
Thanks, that works!
– Faizan Saiyed
Nov 14 '18 at 8:46
add a comment |
The issue is with Array whose changes are not being detected through reference. You can make the following changes -
html
<div class="row tagEntry" *ngFor="let tag of tags; let i = index; trackBy:trackIndex">
<div class="col-md-10">
<input type="text" placeholder="Tag Name" [(ngModel)]="tags[i]" class="form-control">
</div>
<div class="col-md-2">
<button class="btn btn-block btn-danger" (click)="removeTag(i)"><i class="fa fa-trash"></i></button>
</div>
</div>
ts
Add the following function in ts file. This function is very important otherwise the array will re-build the complete UI on any change and you will loose the focus from the elememt.
trackIndex(index,item){
return index;
}
Here is the working copy - https://stackblitz.com/edit/angular-pzdw6s
answered Nov 14 '18 at 8:45
Sunil SinghSunil Singh
6,2322626
The issue is with Array whose changes are not being detected through reference. You can make the following changes -
html
<div class="row tagEntry" *ngFor="let tag of tags; let i = index; trackBy:trackIndex">
<div class="col-md-10">
<input type="text" placeholder="Tag Name" [(ngModel)]="tags[i]" class="form-control">
</div>
<div class="col-md-2">
<button class="btn btn-block btn-danger" (click)="removeTag(i)"><i class="fa fa-trash"></i></button>
</div>
</div>
ts
Add the following function in ts file. This function is very important otherwise the array will re-build the complete UI on any change and you will loose the focus from the elememt.
trackIndex(index,item){
return index;
}
Here is the working copy - https://stackblitz.com/edit/angular-pzdw6s
answered Nov 14 '18 at 8:45
Sunil SinghSunil Singh
6,2322626
answered Nov 14 '18 at 8:45
Sunil SinghSunil Singh
6,2322626
answered Nov 14 '18 at 8:45
Sunil SinghSunil Singh
6,2322626
answered Nov 14 '18 at 8:45
Sunil SinghSunil Singh
6,2322626
6,2322626
Thanks, that works!
– Faizan Saiyed
Nov 14 '18 at 8:46
add a comment |
Thanks, that works!
– Faizan Saiyed
Nov 14 '18 at 8:46
Thanks, that works!
– Faizan Saiyed
Nov 14 '18 at 8:46
Thanks, that works!
– Faizan Saiyed
Nov 14 '18 at 8:46
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53295871%2ftwo-way-binding-in-ngfor-on-array-of-elementsnon-object%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can use
FormArrayor evenQuerySelectorto do that. The second way is more easy to understand– Jacopo Sciampi
Nov 14 '18 at 8:31
And your TS part please ?
– selem mn
Nov 14 '18 at 8:32
@selemmn, updated the question
– Faizan Saiyed
Nov 14 '18 at 8:34
@FaizanSaiyed That is actually correct. tags array is a blank value array. Can you provide a sample at stackblitz.
– Jai
Nov 14 '18 at 8:36
@FaizanSaiyed and your addTag button in HTML :)
– selem mn
Nov 14 '18 at 8:39