Angular4: Disable button in ngFor after click
I have a <button> in a ngFor loop and I want it to be disabled after the user clicks on the button. There is a button for each element of the loop so I have to differentiate them using a different boolean value for each of them.
Here is a code snippet from the html:
<div class="card" *ngFor="let i of items">
<button type="button" [disabled]="'btn' + i.id" (click)="btn + i.id=true">TEST</button>
<div>
The [disabled]="'btn' + i.id" part seems to work, but i cant set the value of it to true using (click)="btn + i.id=true". How can I concatenate the btn and i.id and set the value of it to true?
Any help is appreciated!
angular button ngfor disable
asked Nov 13 '18 at 8:40
tcodebtcodeb
2017
add a comment |
I have a <button> in a ngFor loop and I want it to be disabled after the user clicks on the button. There is a button for each element of the loop so I have to differentiate them using a different boolean value for each of them.
Here is a code snippet from the html:
<div class="card" *ngFor="let i of items">
<button type="button" [disabled]="'btn' + i.id" (click)="btn + i.id=true">TEST</button>
<div>
The [disabled]="'btn' + i.id" part seems to work, but i cant set the value of it to true using (click)="btn + i.id=true". How can I concatenate the btn and i.id and set the value of it to true?
Any help is appreciated!
angular button ngfor disable
asked Nov 13 '18 at 8:40
tcodebtcodeb
2017
add a comment |
I have a <button> in a ngFor loop and I want it to be disabled after the user clicks on the button. There is a button for each element of the loop so I have to differentiate them using a different boolean value for each of them.
Here is a code snippet from the html:
<div class="card" *ngFor="let i of items">
<button type="button" [disabled]="'btn' + i.id" (click)="btn + i.id=true">TEST</button>
<div>
The [disabled]="'btn' + i.id" part seems to work, but i cant set the value of it to true using (click)="btn + i.id=true". How can I concatenate the btn and i.id and set the value of it to true?
Any help is appreciated!
angular button ngfor disable
asked Nov 13 '18 at 8:40
tcodebtcodeb
2017
I have a <button> in a ngFor loop and I want it to be disabled after the user clicks on the button. There is a button for each element of the loop so I have to differentiate them using a different boolean value for each of them.
Here is a code snippet from the html:
<div class="card" *ngFor="let i of items">
<button type="button" [disabled]="'btn' + i.id" (click)="btn + i.id=true">TEST</button>
<div>
The [disabled]="'btn' + i.id" part seems to work, but i cant set the value of it to true using (click)="btn + i.id=true". How can I concatenate the btn and i.id and set the value of it to true?
Any help is appreciated!
angular button ngfor disable
angular button ngfor disable
asked Nov 13 '18 at 8:40
tcodebtcodeb
2017
asked Nov 13 '18 at 8:40
tcodebtcodeb
2017
asked Nov 13 '18 at 8:40
tcodebtcodeb
2017
asked Nov 13 '18 at 8:40
tcodebtcodeb
2017
asked Nov 13 '18 at 8:40
tcodebtcodeb
2017
2017
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Code from head (can have bugs):
In your .ts component use array:
buttons = Array(10).fill(false); // e.g. 10 = size of items
In your template:
<div class="card" *ngFor="let i of items; index as j">
<button type="button" [disabled]="buttons[j]" (click)="buttons[j]=true">TEST</button>
<div>
The index as j works on Angular 5/6, for lower version use let j=index
Alternative solution
Add to items field disabled and use that field directly:
<button type="button" [disabled]="item.disabled" (click)="item.disabled=true">TEST</button>
answered Nov 13 '18 at 8:46
Kamil KiełczewskiKamil Kiełczewski
9,05685789
Τhanks! Works just like I wanted it to.
– tcodeb
Nov 13 '18 at 9:12
add a comment |
Analyze below code
<div class="card" *ngFor="let i of items">
<button type="button" [disabled]="item.clicked" (click)="item.clicked=true">TEST</button>
<div>
This is how it should be implemented in Angular.
If you want to know which button gets clicked in your component. Then add 'clicked'
property in items array and then use it in the component.
answered Nov 13 '18 at 8:59
Abhishek SinghAbhishek Singh
467419
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%2f53276941%2fangular4-disable-button-in-ngfor-after-click%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Code from head (can have bugs):
In your .ts component use array:
buttons = Array(10).fill(false); // e.g. 10 = size of items
In your template:
<div class="card" *ngFor="let i of items; index as j">
<button type="button" [disabled]="buttons[j]" (click)="buttons[j]=true">TEST</button>
<div>
The index as j works on Angular 5/6, for lower version use let j=index
Alternative solution
Add to items field disabled and use that field directly:
<button type="button" [disabled]="item.disabled" (click)="item.disabled=true">TEST</button>
answered Nov 13 '18 at 8:46
Kamil KiełczewskiKamil Kiełczewski
9,05685789
Τhanks! Works just like I wanted it to.
– tcodeb
Nov 13 '18 at 9:12
add a comment |
Code from head (can have bugs):
In your .ts component use array:
buttons = Array(10).fill(false); // e.g. 10 = size of items
In your template:
<div class="card" *ngFor="let i of items; index as j">
<button type="button" [disabled]="buttons[j]" (click)="buttons[j]=true">TEST</button>
<div>
The index as j works on Angular 5/6, for lower version use let j=index
Alternative solution
Add to items field disabled and use that field directly:
<button type="button" [disabled]="item.disabled" (click)="item.disabled=true">TEST</button>
answered Nov 13 '18 at 8:46
Kamil KiełczewskiKamil Kiełczewski
9,05685789
Τhanks! Works just like I wanted it to.
– tcodeb
Nov 13 '18 at 9:12
add a comment |
Code from head (can have bugs):
In your .ts component use array:
buttons = Array(10).fill(false); // e.g. 10 = size of items
In your template:
<div class="card" *ngFor="let i of items; index as j">
<button type="button" [disabled]="buttons[j]" (click)="buttons[j]=true">TEST</button>
<div>
The index as j works on Angular 5/6, for lower version use let j=index
Alternative solution
Add to items field disabled and use that field directly:
<button type="button" [disabled]="item.disabled" (click)="item.disabled=true">TEST</button>
answered Nov 13 '18 at 8:46
Kamil KiełczewskiKamil Kiełczewski
9,05685789
Code from head (can have bugs):
In your .ts component use array:
buttons = Array(10).fill(false); // e.g. 10 = size of items
In your template:
<div class="card" *ngFor="let i of items; index as j">
<button type="button" [disabled]="buttons[j]" (click)="buttons[j]=true">TEST</button>
<div>
The index as j works on Angular 5/6, for lower version use let j=index
Alternative solution
Add to items field disabled and use that field directly:
<button type="button" [disabled]="item.disabled" (click)="item.disabled=true">TEST</button>
answered Nov 13 '18 at 8:46
Kamil KiełczewskiKamil Kiełczewski
9,05685789
answered Nov 13 '18 at 8:46
Kamil KiełczewskiKamil Kiełczewski
9,05685789
answered Nov 13 '18 at 8:46
Kamil KiełczewskiKamil Kiełczewski
9,05685789
answered Nov 13 '18 at 8:46
Kamil KiełczewskiKamil Kiełczewski
9,05685789
9,05685789
Τhanks! Works just like I wanted it to.
– tcodeb
Nov 13 '18 at 9:12
add a comment |
Τhanks! Works just like I wanted it to.
– tcodeb
Nov 13 '18 at 9:12
Τhanks! Works just like I wanted it to.
– tcodeb
Nov 13 '18 at 9:12
Τhanks! Works just like I wanted it to.
– tcodeb
Nov 13 '18 at 9:12
add a comment |
Analyze below code
<div class="card" *ngFor="let i of items">
<button type="button" [disabled]="item.clicked" (click)="item.clicked=true">TEST</button>
<div>
This is how it should be implemented in Angular.
If you want to know which button gets clicked in your component. Then add 'clicked'
property in items array and then use it in the component.
answered Nov 13 '18 at 8:59
Abhishek SinghAbhishek Singh
467419
add a comment |
Analyze below code
<div class="card" *ngFor="let i of items">
<button type="button" [disabled]="item.clicked" (click)="item.clicked=true">TEST</button>
<div>
This is how it should be implemented in Angular.
If you want to know which button gets clicked in your component. Then add 'clicked'
property in items array and then use it in the component.
answered Nov 13 '18 at 8:59
Abhishek SinghAbhishek Singh
467419
add a comment |
Analyze below code
<div class="card" *ngFor="let i of items">
<button type="button" [disabled]="item.clicked" (click)="item.clicked=true">TEST</button>
<div>
This is how it should be implemented in Angular.
If you want to know which button gets clicked in your component. Then add 'clicked'
property in items array and then use it in the component.
answered Nov 13 '18 at 8:59
Abhishek SinghAbhishek Singh
467419
Analyze below code
<div class="card" *ngFor="let i of items">
<button type="button" [disabled]="item.clicked" (click)="item.clicked=true">TEST</button>
<div>
This is how it should be implemented in Angular.
If you want to know which button gets clicked in your component. Then add 'clicked'
property in items array and then use it in the component.
answered Nov 13 '18 at 8:59
Abhishek SinghAbhishek Singh
467419
edited Nov 13 '18 at 9:06
answered Nov 13 '18 at 8:59
Abhishek SinghAbhishek Singh
467419
answered Nov 13 '18 at 8:59
Abhishek SinghAbhishek Singh
467419
answered Nov 13 '18 at 8:59
Abhishek SinghAbhishek Singh
467419
467419
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53276941%2fangular4-disable-button-in-ngfor-after-click%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
