Is it possible to pass the value of an Angular-generated input without an ID into a function? The Next CEO of Stack OverflowSet the value of an input fieldHow do I get the value of text input field using JavaScript?How to detect when an @Input() value changes in Angular?Huge number of files generated for every Angular projectHow to Implement matSort in Angular 5 Material TableAngular 6 Material Table Sticky Header doesn't workSorting with dynamic column - Angular materialAngular - Working on Form arrays with Mat tableAngular - add new row to mat-table when using FormControlArray as dataSourceAdd Multiple columns for same header on click button dynamically in mat-table angular
Writing differences on a blackboard
What flight has the highest ratio of timezone difference to flight time?
Domestic-to-international connection at Orlando (MCO)
Bartok - Syncopation (1): Meaning of notes in between Grand Staff
Why do airplanes bank sharply to the right after air-to-air refueling?
A small doubt about the dominated convergence theorem
Is there a difference between "Fahrstuhl" and "Aufzug"
What was the first Unix version to run on a microcomputer?
What did we know about the Kessel run before the prequels?
Poetry, calligrams and TikZ/PStricks challenge
Is there a way to save my career from absolute disaster?
TikZ: How to reverse arrow direction without switching start/end point?
How did people program for Consoles with multiple CPUs?
Would a grinding machine be a simple and workable propulsion system for an interplanetary spacecraft?
Help understanding this unsettling image of Titan, Epimetheus, and Saturn's rings?
Why didn't Khan get resurrected in the Genesis Explosion?
The exact meaning of 'Mom made me a sandwich'
Do they change the text of the seder in Israel?
Is it possible to use a NPN BJT as switch, from single power source?
The past simple of "gaslight" – "gaslighted" or "gaslit"?
Won the lottery - how do I keep the money?
Grabbing quick drinks
Necessary condition on homology group for a set to be contractible
Prepend last line of stdin to entire stdin
Is it possible to pass the value of an Angular-generated input without an ID into a function?
The Next CEO of Stack OverflowSet the value of an input fieldHow do I get the value of text input field using JavaScript?How to detect when an @Input() value changes in Angular?Huge number of files generated for every Angular projectHow to Implement matSort in Angular 5 Material TableAngular 6 Material Table Sticky Header doesn't workSorting with dynamic column - Angular materialAngular - Working on Form arrays with Mat tableAngular - add new row to mat-table when using FormControlArray as dataSourceAdd Multiple columns for same header on click button dynamically in mat-table angular
I'm trying to make the values of the cells in a column on a table editable. The problem is, since the table is dynamically generated using MatTableDataSource in Angular with values from an API, the cell elements can't have unique IDs. How can I make it so that on a blur (after editing and changing the value in a cell), it passes that value to a function that can then write that new value into a request to the API to update it?
Here's the HTML of the column of cells in question:
<div>
<table mat-table matSort (matSortChange)="sortData($event)" [dataSource]="sortedData">
<!-- Other columns -->
<ng-container matColumnDef="maxInstalls">
<th mat-header-cell *matHeaderCellDef>Max Installs</th>
<td mat-cell *matCellDef="let profile">
<input type="number" min="0" value="profile.maximumInstalls"> <!-- I just need the value of this input -->
</td>
</ng-container>
<!-- Other columns -->
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;">
</tr>
</table>
</div>
angular input id asked Mar 21 at 18:12
Austin BallardAustin Ballard
104
add a comment |
I'm trying to make the values of the cells in a column on a table editable. The problem is, since the table is dynamically generated using MatTableDataSource in Angular with values from an API, the cell elements can't have unique IDs. How can I make it so that on a blur (after editing and changing the value in a cell), it passes that value to a function that can then write that new value into a request to the API to update it?
Here's the HTML of the column of cells in question:
<div>
<table mat-table matSort (matSortChange)="sortData($event)" [dataSource]="sortedData">
<!-- Other columns -->
<ng-container matColumnDef="maxInstalls">
<th mat-header-cell *matHeaderCellDef>Max Installs</th>
<td mat-cell *matCellDef="let profile">
<input type="number" min="0" value="profile.maximumInstalls"> <!-- I just need the value of this input -->
</td>
</ng-container>
<!-- Other columns -->
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;">
</tr>
</table>
</div>
asked Mar 21 at 18:12
Austin BallardAustin Ballard
104
add a comment |
I'm trying to make the values of the cells in a column on a table editable. The problem is, since the table is dynamically generated using MatTableDataSource in Angular with values from an API, the cell elements can't have unique IDs. How can I make it so that on a blur (after editing and changing the value in a cell), it passes that value to a function that can then write that new value into a request to the API to update it?
Here's the HTML of the column of cells in question:
<div>
<table mat-table matSort (matSortChange)="sortData($event)" [dataSource]="sortedData">
<!-- Other columns -->
<ng-container matColumnDef="maxInstalls">
<th mat-header-cell *matHeaderCellDef>Max Installs</th>
<td mat-cell *matCellDef="let profile">
<input type="number" min="0" value="profile.maximumInstalls"> <!-- I just need the value of this input -->
</td>
</ng-container>
<!-- Other columns -->
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;">
</tr>
</table>
</div>
asked Mar 21 at 18:12
Austin BallardAustin Ballard
104
I'm trying to make the values of the cells in a column on a table editable. The problem is, since the table is dynamically generated using MatTableDataSource in Angular with values from an API, the cell elements can't have unique IDs. How can I make it so that on a blur (after editing and changing the value in a cell), it passes that value to a function that can then write that new value into a request to the API to update it?
Here's the HTML of the column of cells in question:
<div>
<table mat-table matSort (matSortChange)="sortData($event)" [dataSource]="sortedData">
<!-- Other columns -->
<ng-container matColumnDef="maxInstalls">
<th mat-header-cell *matHeaderCellDef>Max Installs</th>
<td mat-cell *matCellDef="let profile">
<input type="number" min="0" value="profile.maximumInstalls"> <!-- I just need the value of this input -->
</td>
</ng-container>
<!-- Other columns -->
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;">
</tr>
</table>
</div>
asked Mar 21 at 18:12
Austin BallardAustin Ballard
104
asked Mar 21 at 18:12
Austin BallardAustin Ballard
104
asked Mar 21 at 18:12
Austin BallardAustin Ballard
104
asked Mar 21 at 18:12
Austin BallardAustin Ballard
104
asked Mar 21 at 18:12
Austin BallardAustin Ballard
104
104
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
What about
<input type="number" min="0" value="profile.maximumInstalls" (blur)="onBlu(profile)">
if you want the value of the input you need to create a reference to input and use it like below
<input #valueInput type="number" min="0" value="profile.maximumInstalls" (blur)="onBlur(valueInput.value)">
see the working example here
answered Mar 21 at 18:17
RezaRahmatiRezaRahmati
7,69823280
That only returns the object taken from the API, not the value of the input box itself. I need to know the value the user typed in before blurring their focus.
– Austin Ballard
Mar 25 at 15:56
@AustinBallard see my updated answer
– RezaRahmati
Mar 25 at 20:02
That reference made it work. Now I just have to figure out why it's sometimes marking it as an unused variable even though I use it in a function. But thanks! That answers this question.
– Austin Ballard
Mar 25 at 21:55
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%2f55286773%2fis-it-possible-to-pass-the-value-of-an-angular-generated-input-without-an-id-int%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
What about
<input type="number" min="0" value="profile.maximumInstalls" (blur)="onBlu(profile)">
if you want the value of the input you need to create a reference to input and use it like below
<input #valueInput type="number" min="0" value="profile.maximumInstalls" (blur)="onBlur(valueInput.value)">
see the working example here
answered Mar 21 at 18:17
RezaRahmatiRezaRahmati
7,69823280
That only returns the object taken from the API, not the value of the input box itself. I need to know the value the user typed in before blurring their focus.
– Austin Ballard
Mar 25 at 15:56
@AustinBallard see my updated answer
– RezaRahmati
Mar 25 at 20:02
That reference made it work. Now I just have to figure out why it's sometimes marking it as an unused variable even though I use it in a function. But thanks! That answers this question.
– Austin Ballard
Mar 25 at 21:55
add a comment |
What about
<input type="number" min="0" value="profile.maximumInstalls" (blur)="onBlu(profile)">
if you want the value of the input you need to create a reference to input and use it like below
<input #valueInput type="number" min="0" value="profile.maximumInstalls" (blur)="onBlur(valueInput.value)">
see the working example here
answered Mar 21 at 18:17
RezaRahmatiRezaRahmati
7,69823280
That only returns the object taken from the API, not the value of the input box itself. I need to know the value the user typed in before blurring their focus.
– Austin Ballard
Mar 25 at 15:56
@AustinBallard see my updated answer
– RezaRahmati
Mar 25 at 20:02
That reference made it work. Now I just have to figure out why it's sometimes marking it as an unused variable even though I use it in a function. But thanks! That answers this question.
– Austin Ballard
Mar 25 at 21:55
add a comment |
What about
<input type="number" min="0" value="profile.maximumInstalls" (blur)="onBlu(profile)">
if you want the value of the input you need to create a reference to input and use it like below
<input #valueInput type="number" min="0" value="profile.maximumInstalls" (blur)="onBlur(valueInput.value)">
see the working example here
answered Mar 21 at 18:17
RezaRahmatiRezaRahmati
7,69823280
What about
<input type="number" min="0" value="profile.maximumInstalls" (blur)="onBlu(profile)">
if you want the value of the input you need to create a reference to input and use it like below
<input #valueInput type="number" min="0" value="profile.maximumInstalls" (blur)="onBlur(valueInput.value)">
see the working example here
answered Mar 21 at 18:17
RezaRahmatiRezaRahmati
7,69823280
edited Mar 25 at 20:02
answered Mar 21 at 18:17
RezaRahmatiRezaRahmati
7,69823280
answered Mar 21 at 18:17
RezaRahmatiRezaRahmati
7,69823280
answered Mar 21 at 18:17
RezaRahmatiRezaRahmati
7,69823280
7,69823280
That only returns the object taken from the API, not the value of the input box itself. I need to know the value the user typed in before blurring their focus.
– Austin Ballard
Mar 25 at 15:56
@AustinBallard see my updated answer
– RezaRahmati
Mar 25 at 20:02
That reference made it work. Now I just have to figure out why it's sometimes marking it as an unused variable even though I use it in a function. But thanks! That answers this question.
– Austin Ballard
Mar 25 at 21:55
add a comment |
That only returns the object taken from the API, not the value of the input box itself. I need to know the value the user typed in before blurring their focus.
– Austin Ballard
Mar 25 at 15:56
@AustinBallard see my updated answer
– RezaRahmati
Mar 25 at 20:02
That reference made it work. Now I just have to figure out why it's sometimes marking it as an unused variable even though I use it in a function. But thanks! That answers this question.
– Austin Ballard
Mar 25 at 21:55
That only returns the object taken from the API, not the value of the input box itself. I need to know the value the user typed in before blurring their focus.
– Austin Ballard
Mar 25 at 15:56
That only returns the object taken from the API, not the value of the input box itself. I need to know the value the user typed in before blurring their focus.
– Austin Ballard
Mar 25 at 15:56
@AustinBallard see my updated answer
– RezaRahmati
Mar 25 at 20:02
@AustinBallard see my updated answer
– RezaRahmati
Mar 25 at 20:02
That reference made it work. Now I just have to figure out why it's sometimes marking it as an unused variable even though I use it in a function. But thanks! That answers this question.
– Austin Ballard
Mar 25 at 21:55
That reference made it work. Now I just have to figure out why it's sometimes marking it as an unused variable even though I use it in a function. But thanks! That answers this question.
– Austin Ballard
Mar 25 at 21:55
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%2f55286773%2fis-it-possible-to-pass-the-value-of-an-angular-generated-input-without-an-id-int%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
