How to update array on input change using async in angular 5?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I want to create a solution to update observable array objects on input change
I am creating a table from an array using ngFor from angular having one text field with bid value.
What I want is whenever user updated text field, object consist of that bid value should be automatically updated
Here is my code
Template file:
<table class="table table-striped applist-table table-bordered">
<thead>
<tr>
<th width="10%" class="text-center">App Id</th>
<th width="40%">App/Site Name</th>
<th width="30%">Exchange Name</th>
<th width="20%">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let a of apps | async">
<td width="15%" class="text-center">{{ a.sid }}</td>
<td width="40%">{{ a.appName }}</td>
<td width="30%">{{ a.exchange }}</td>
<td width="15%">
<div class="input-group">
<input type="text" class="form-control" value="{{a.dynamic_bid}}" #bid />
<div class="input-group-append">
</div>
</div>
</td>
</tr>
</tbody>
</table>
component.ts
apps: Apps = ;
openBidUpdateOptions(content) {
this.loading = true;
this._campaignOperations.loadCampaignApplistData(this.id).subscribe(
data => {
if (data.status == 1200) {
this.loading = false;
this.apps = data.data;
this.modalReference = this.modalService.open(content, {
size: 'lg'
});
this.modalReference.result.then((result) => {
}, (reason) => {
});
this.loading = false;
} else {
let str: any = '';
let errorList = data.errors;
for (let i in errorList) {
str += errorList[i] + "<br>";
}
this.toastr.error(str, 'Error');
this.loading = false;
return false;
}
},
error => {
swal({
position: 'center',
type: 'error',
title: 'Unable to create campaign due to unknown error',
showConfirmButton: false,
timer: 1500
});
this.loading = false;
return false;
});
}
export interface Apps {
id ? : string;
sid ? : string;
appName ? : string;
exchange ? : string;
dynamic_bid ? : string;
}
Here is demo for same : https://stackblitz.com/edit/angular-kmjrqd
javascript
angular rxjs observable asked Nov 22 '18 at 9:30
Ripul ChhabraRipul Chhabra
10910
add a comment |
0
I want to create a solution to update observable array objects on input change
I am creating a table from an array using ngFor from angular having one text field with bid value.
What I want is whenever user updated text field, object consist of that bid value should be automatically updated
Here is my code
Template file:
<table class="table table-striped applist-table table-bordered">
<thead>
<tr>
<th width="10%" class="text-center">App Id</th>
<th width="40%">App/Site Name</th>
<th width="30%">Exchange Name</th>
<th width="20%">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let a of apps | async">
<td width="15%" class="text-center">{{ a.sid }}</td>
<td width="40%">{{ a.appName }}</td>
<td width="30%">{{ a.exchange }}</td>
<td width="15%">
<div class="input-group">
<input type="text" class="form-control" value="{{a.dynamic_bid}}" #bid />
<div class="input-group-append">
</div>
</div>
</td>
</tr>
</tbody>
</table>
component.ts
apps: Apps = ;
openBidUpdateOptions(content) {
this.loading = true;
this._campaignOperations.loadCampaignApplistData(this.id).subscribe(
data => {
if (data.status == 1200) {
this.loading = false;
this.apps = data.data;
this.modalReference = this.modalService.open(content, {
size: 'lg'
});
this.modalReference.result.then((result) => {
}, (reason) => {
});
this.loading = false;
} else {
let str: any = '';
let errorList = data.errors;
for (let i in errorList) {
str += errorList[i] + "<br>";
}
this.toastr.error(str, 'Error');
this.loading = false;
return false;
}
},
error => {
swal({
position: 'center',
type: 'error',
title: 'Unable to create campaign due to unknown error',
showConfirmButton: false,
timer: 1500
});
this.loading = false;
return false;
});
}
export interface Apps {
id ? : string;
sid ? : string;
appName ? : string;
exchange ? : string;
dynamic_bid ? : string;
}
Here is demo for same : https://stackblitz.com/edit/angular-kmjrqd
javascript
angular rxjs observable asked Nov 22 '18 at 9:30
Ripul ChhabraRipul Chhabra
10910
You mean you want to get values from back-end and update?
– Asanka
Nov 22 '18 at 10:00
Nope i already have array from retrieved from backend i want to update specific object on input change
– Ripul Chhabra
Nov 22 '18 at 10:03
Can you update your example in stackblitz so the problem can be more clear
– Shorbagy
Nov 22 '18 at 10:22
sure here it is, stackblitz.com/edit/angular-kmjrqd whenever textbox updates i want object in array should be updated
– Ripul Chhabra
Nov 22 '18 at 10:37
1
as @bluray suggests to make it [(ngModel)] this is the robust solution and will make your task very will
– Shorbagy
Nov 22 '18 at 11:31
add a comment |
0
0
0
1
I want to create a solution to update observable array objects on input change
I am creating a table from an array using ngFor from angular having one text field with bid value.
What I want is whenever user updated text field, object consist of that bid value should be automatically updated
Here is my code
Template file:
<table class="table table-striped applist-table table-bordered">
<thead>
<tr>
<th width="10%" class="text-center">App Id</th>
<th width="40%">App/Site Name</th>
<th width="30%">Exchange Name</th>
<th width="20%">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let a of apps | async">
<td width="15%" class="text-center">{{ a.sid }}</td>
<td width="40%">{{ a.appName }}</td>
<td width="30%">{{ a.exchange }}</td>
<td width="15%">
<div class="input-group">
<input type="text" class="form-control" value="{{a.dynamic_bid}}" #bid />
<div class="input-group-append">
</div>
</div>
</td>
</tr>
</tbody>
</table>
component.ts
apps: Apps = ;
openBidUpdateOptions(content) {
this.loading = true;
this._campaignOperations.loadCampaignApplistData(this.id).subscribe(
data => {
if (data.status == 1200) {
this.loading = false;
this.apps = data.data;
this.modalReference = this.modalService.open(content, {
size: 'lg'
});
this.modalReference.result.then((result) => {
}, (reason) => {
});
this.loading = false;
} else {
let str: any = '';
let errorList = data.errors;
for (let i in errorList) {
str += errorList[i] + "<br>";
}
this.toastr.error(str, 'Error');
this.loading = false;
return false;
}
},
error => {
swal({
position: 'center',
type: 'error',
title: 'Unable to create campaign due to unknown error',
showConfirmButton: false,
timer: 1500
});
this.loading = false;
return false;
});
}
export interface Apps {
id ? : string;
sid ? : string;
appName ? : string;
exchange ? : string;
dynamic_bid ? : string;
}
Here is demo for same : https://stackblitz.com/edit/angular-kmjrqd
javascript
angular rxjs observable asked Nov 22 '18 at 9:30
Ripul ChhabraRipul Chhabra
10910
I want to create a solution to update observable array objects on input change
I am creating a table from an array using ngFor from angular having one text field with bid value.
What I want is whenever user updated text field, object consist of that bid value should be automatically updated
Here is my code
Template file:
<table class="table table-striped applist-table table-bordered">
<thead>
<tr>
<th width="10%" class="text-center">App Id</th>
<th width="40%">App/Site Name</th>
<th width="30%">Exchange Name</th>
<th width="20%">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let a of apps | async">
<td width="15%" class="text-center">{{ a.sid }}</td>
<td width="40%">{{ a.appName }}</td>
<td width="30%">{{ a.exchange }}</td>
<td width="15%">
<div class="input-group">
<input type="text" class="form-control" value="{{a.dynamic_bid}}" #bid />
<div class="input-group-append">
</div>
</div>
</td>
</tr>
</tbody>
</table>
component.ts
apps: Apps = ;
openBidUpdateOptions(content) {
this.loading = true;
this._campaignOperations.loadCampaignApplistData(this.id).subscribe(
data => {
if (data.status == 1200) {
this.loading = false;
this.apps = data.data;
this.modalReference = this.modalService.open(content, {
size: 'lg'
});
this.modalReference.result.then((result) => {
}, (reason) => {
});
this.loading = false;
} else {
let str: any = '';
let errorList = data.errors;
for (let i in errorList) {
str += errorList[i] + "<br>";
}
this.toastr.error(str, 'Error');
this.loading = false;
return false;
}
},
error => {
swal({
position: 'center',
type: 'error',
title: 'Unable to create campaign due to unknown error',
showConfirmButton: false,
timer: 1500
});
this.loading = false;
return false;
});
}
export interface Apps {
id ? : string;
sid ? : string;
appName ? : string;
exchange ? : string;
dynamic_bid ? : string;
}
Here is demo for same : https://stackblitz.com/edit/angular-kmjrqd
javascript
angular rxjs observable javascript
angular rxjs observable asked Nov 22 '18 at 9:30
Ripul ChhabraRipul Chhabra
10910
asked Nov 22 '18 at 9:30
Ripul ChhabraRipul Chhabra
10910
edited Nov 22 '18 at 10:38
Ripul Chhabra
asked Nov 22 '18 at 9:30
Ripul ChhabraRipul Chhabra
10910
asked Nov 22 '18 at 9:30
Ripul ChhabraRipul Chhabra
10910
asked Nov 22 '18 at 9:30
Ripul ChhabraRipul Chhabra
10910
10910
You mean you want to get values from back-end and update?
– Asanka
Nov 22 '18 at 10:00
Nope i already have array from retrieved from backend i want to update specific object on input change
– Ripul Chhabra
Nov 22 '18 at 10:03
Can you update your example in stackblitz so the problem can be more clear
– Shorbagy
Nov 22 '18 at 10:22
sure here it is, stackblitz.com/edit/angular-kmjrqd whenever textbox updates i want object in array should be updated
– Ripul Chhabra
Nov 22 '18 at 10:37
1
as @bluray suggests to make it [(ngModel)] this is the robust solution and will make your task very will
– Shorbagy
Nov 22 '18 at 11:31
add a comment |
You mean you want to get values from back-end and update?
– Asanka
Nov 22 '18 at 10:00
Nope i already have array from retrieved from backend i want to update specific object on input change
– Ripul Chhabra
Nov 22 '18 at 10:03
Can you update your example in stackblitz so the problem can be more clear
– Shorbagy
Nov 22 '18 at 10:22
sure here it is, stackblitz.com/edit/angular-kmjrqd whenever textbox updates i want object in array should be updated
– Ripul Chhabra
Nov 22 '18 at 10:37
1
as @bluray suggests to make it [(ngModel)] this is the robust solution and will make your task very will
– Shorbagy
Nov 22 '18 at 11:31
You mean you want to get values from back-end and update?
– Asanka
Nov 22 '18 at 10:00
You mean you want to get values from back-end and update?
– Asanka
Nov 22 '18 at 10:00
Nope i already have array from retrieved from backend i want to update specific object on input change
– Ripul Chhabra
Nov 22 '18 at 10:03
Nope i already have array from retrieved from backend i want to update specific object on input change
– Ripul Chhabra
Nov 22 '18 at 10:03
Can you update your example in stackblitz so the problem can be more clear
– Shorbagy
Nov 22 '18 at 10:22
Can you update your example in stackblitz so the problem can be more clear
– Shorbagy
Nov 22 '18 at 10:22
sure here it is, stackblitz.com/edit/angular-kmjrqd whenever textbox updates i want object in array should be updated
– Ripul Chhabra
Nov 22 '18 at 10:37
sure here it is, stackblitz.com/edit/angular-kmjrqd whenever textbox updates i want object in array should be updated
– Ripul Chhabra
Nov 22 '18 at 10:37
1
1
as @bluray suggests to make it [(ngModel)] this is the robust solution and will make your task very will
– Shorbagy
Nov 22 '18 at 11:31
as @bluray suggests to make it [(ngModel)] this is the robust solution and will make your task very will
– Shorbagy
Nov 22 '18 at 11:31
add a comment |
1 Answer
1
active
oldest
votes
2
I dont sure if I understand your problem. But I think you can use ngModel:
<input type="text" class="form-control" [(ngModel)]="a.dynamic_bid" #bid />
answered Nov 22 '18 at 9:44
bluraybluray
8301540
Nope, this wont work, here i will have multiple rows with each having text field consist of bid value. i don't want to write any click on input change event. whenever input value updates i want that specific property to be updated on same array. i can make this possible by other ways as well but don't want to make more complex
– Ripul Chhabra
Nov 22 '18 at 9:47
2
So what is wrong in this answer. you have 2 way databinding and your array will be updated?
– Asanka
Nov 22 '18 at 10:48
2
check this stackblitz.com/edit/angular-rcyknu?file=src/app/…
– Asanka
Nov 22 '18 at 10:58
Thanks, sorry i was not aware of solution
– Ripul Chhabra
Nov 22 '18 at 11:37
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427714%2fhow-to-update-array-on-input-change-using-async-in-angular-5%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
2
I dont sure if I understand your problem. But I think you can use ngModel:
<input type="text" class="form-control" [(ngModel)]="a.dynamic_bid" #bid />
answered Nov 22 '18 at 9:44
bluraybluray
8301540
Nope, this wont work, here i will have multiple rows with each having text field consist of bid value. i don't want to write any click on input change event. whenever input value updates i want that specific property to be updated on same array. i can make this possible by other ways as well but don't want to make more complex
– Ripul Chhabra
Nov 22 '18 at 9:47
2
So what is wrong in this answer. you have 2 way databinding and your array will be updated?
– Asanka
Nov 22 '18 at 10:48
2
check this stackblitz.com/edit/angular-rcyknu?file=src/app/…
– Asanka
Nov 22 '18 at 10:58
Thanks, sorry i was not aware of solution
– Ripul Chhabra
Nov 22 '18 at 11:37
add a comment |
2
I dont sure if I understand your problem. But I think you can use ngModel:
<input type="text" class="form-control" [(ngModel)]="a.dynamic_bid" #bid />
answered Nov 22 '18 at 9:44
bluraybluray
8301540
Nope, this wont work, here i will have multiple rows with each having text field consist of bid value. i don't want to write any click on input change event. whenever input value updates i want that specific property to be updated on same array. i can make this possible by other ways as well but don't want to make more complex
– Ripul Chhabra
Nov 22 '18 at 9:47
2
So what is wrong in this answer. you have 2 way databinding and your array will be updated?
– Asanka
Nov 22 '18 at 10:48
2
check this stackblitz.com/edit/angular-rcyknu?file=src/app/…
– Asanka
Nov 22 '18 at 10:58
Thanks, sorry i was not aware of solution
– Ripul Chhabra
Nov 22 '18 at 11:37
add a comment |
2
2
2
I dont sure if I understand your problem. But I think you can use ngModel:
<input type="text" class="form-control" [(ngModel)]="a.dynamic_bid" #bid />
answered Nov 22 '18 at 9:44
bluraybluray
8301540
I dont sure if I understand your problem. But I think you can use ngModel:
<input type="text" class="form-control" [(ngModel)]="a.dynamic_bid" #bid />
answered Nov 22 '18 at 9:44
bluraybluray
8301540
answered Nov 22 '18 at 9:44
bluraybluray
8301540
answered Nov 22 '18 at 9:44
bluraybluray
8301540
answered Nov 22 '18 at 9:44
bluraybluray
8301540
8301540
Nope, this wont work, here i will have multiple rows with each having text field consist of bid value. i don't want to write any click on input change event. whenever input value updates i want that specific property to be updated on same array. i can make this possible by other ways as well but don't want to make more complex
– Ripul Chhabra
Nov 22 '18 at 9:47
2
So what is wrong in this answer. you have 2 way databinding and your array will be updated?
– Asanka
Nov 22 '18 at 10:48
2
check this stackblitz.com/edit/angular-rcyknu?file=src/app/…
– Asanka
Nov 22 '18 at 10:58
Thanks, sorry i was not aware of solution
– Ripul Chhabra
Nov 22 '18 at 11:37
add a comment |
Nope, this wont work, here i will have multiple rows with each having text field consist of bid value. i don't want to write any click on input change event. whenever input value updates i want that specific property to be updated on same array. i can make this possible by other ways as well but don't want to make more complex
– Ripul Chhabra
Nov 22 '18 at 9:47
2
So what is wrong in this answer. you have 2 way databinding and your array will be updated?
– Asanka
Nov 22 '18 at 10:48
2
check this stackblitz.com/edit/angular-rcyknu?file=src/app/…
– Asanka
Nov 22 '18 at 10:58
Thanks, sorry i was not aware of solution
– Ripul Chhabra
Nov 22 '18 at 11:37
Nope, this wont work, here i will have multiple rows with each having text field consist of bid value. i don't want to write any click on input change event. whenever input value updates i want that specific property to be updated on same array. i can make this possible by other ways as well but don't want to make more complex
– Ripul Chhabra
Nov 22 '18 at 9:47
Nope, this wont work, here i will have multiple rows with each having text field consist of bid value. i don't want to write any click on input change event. whenever input value updates i want that specific property to be updated on same array. i can make this possible by other ways as well but don't want to make more complex
– Ripul Chhabra
Nov 22 '18 at 9:47
2
2
So what is wrong in this answer. you have 2 way databinding and your array will be updated?
– Asanka
Nov 22 '18 at 10:48
So what is wrong in this answer. you have 2 way databinding and your array will be updated?
– Asanka
Nov 22 '18 at 10:48
2
2
check this stackblitz.com/edit/angular-rcyknu?file=src/app/…
– Asanka
Nov 22 '18 at 10:58
check this stackblitz.com/edit/angular-rcyknu?file=src/app/…
– Asanka
Nov 22 '18 at 10:58
Thanks, sorry i was not aware of solution
– Ripul Chhabra
Nov 22 '18 at 11:37
Thanks, sorry i was not aware of solution
– Ripul Chhabra
Nov 22 '18 at 11:37
add a comment |
draft saved
draft discarded
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.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427714%2fhow-to-update-array-on-input-change-using-async-in-angular-5%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 mean you want to get values from back-end and update?
– Asanka
Nov 22 '18 at 10:00
Nope i already have array from retrieved from backend i want to update specific object on input change
– Ripul Chhabra
Nov 22 '18 at 10:03
Can you update your example in stackblitz so the problem can be more clear
– Shorbagy
Nov 22 '18 at 10:22
sure here it is, stackblitz.com/edit/angular-kmjrqd whenever textbox updates i want object in array should be updated
– Ripul Chhabra
Nov 22 '18 at 10:37
1
as @bluray suggests to make it [(ngModel)] this is the robust solution and will make your task very will
– Shorbagy
Nov 22 '18 at 11:31