conditionally show and hide button using angular 6
up vote
0
down vote
favorite
Actually i am trying to disable the button when the task is running. Once the task finished loading i want to activate the button. Means paralally the sync icon spins when the task status is in 'In_progress' once the status changes to 'Completed' the spinner should be hidden and the button 'AutoCode Sync' should be activated. So how to achieve that one. For that i have written the below code:
<section *ngFor="let task of tasksRes">
<nav>
<span class="text-warning" *ngIf="task?.status == 'In_progress'"><i class="fa fa-spinner fa-spin"></i></span>
</nav>
<div class="pull-right">
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md">
AutoCode Sync
</button>
</div>
</section>
Can anyone please help me in this to achieve?
Thanks.
javascript angular typescript
asked Nov 12 at 10:01
youi
309311
add a comment |
up vote
0
down vote
favorite
Actually i am trying to disable the button when the task is running. Once the task finished loading i want to activate the button. Means paralally the sync icon spins when the task status is in 'In_progress' once the status changes to 'Completed' the spinner should be hidden and the button 'AutoCode Sync' should be activated. So how to achieve that one. For that i have written the below code:
<section *ngFor="let task of tasksRes">
<nav>
<span class="text-warning" *ngIf="task?.status == 'In_progress'"><i class="fa fa-spinner fa-spin"></i></span>
</nav>
<div class="pull-right">
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md">
AutoCode Sync
</button>
</div>
</section>
Can anyone please help me in this to achieve?
Thanks.
javascript angular typescript
asked Nov 12 at 10:01
youi
309311
you can conditionally disable the button[disabled]="task?.status=='In_progress'"
– Sarthak Aggarwal
Nov 12 at 10:03
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Actually i am trying to disable the button when the task is running. Once the task finished loading i want to activate the button. Means paralally the sync icon spins when the task status is in 'In_progress' once the status changes to 'Completed' the spinner should be hidden and the button 'AutoCode Sync' should be activated. So how to achieve that one. For that i have written the below code:
<section *ngFor="let task of tasksRes">
<nav>
<span class="text-warning" *ngIf="task?.status == 'In_progress'"><i class="fa fa-spinner fa-spin"></i></span>
</nav>
<div class="pull-right">
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md">
AutoCode Sync
</button>
</div>
</section>
Can anyone please help me in this to achieve?
Thanks.
javascript angular typescript
asked Nov 12 at 10:01
youi
309311
Actually i am trying to disable the button when the task is running. Once the task finished loading i want to activate the button. Means paralally the sync icon spins when the task status is in 'In_progress' once the status changes to 'Completed' the spinner should be hidden and the button 'AutoCode Sync' should be activated. So how to achieve that one. For that i have written the below code:
<section *ngFor="let task of tasksRes">
<nav>
<span class="text-warning" *ngIf="task?.status == 'In_progress'"><i class="fa fa-spinner fa-spin"></i></span>
</nav>
<div class="pull-right">
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md">
AutoCode Sync
</button>
</div>
</section>
Can anyone please help me in this to achieve?
Thanks.
javascript angular typescript
javascript angular typescript
asked Nov 12 at 10:01
youi
309311
asked Nov 12 at 10:01
youi
309311
asked Nov 12 at 10:01
youi
309311
asked Nov 12 at 10:01
youi
309311
asked Nov 12 at 10:01
youi
309311
309311
you can conditionally disable the button[disabled]="task?.status=='In_progress'"
– Sarthak Aggarwal
Nov 12 at 10:03
add a comment |
you can conditionally disable the button[disabled]="task?.status=='In_progress'"
– Sarthak Aggarwal
Nov 12 at 10:03
you can conditionally disable the button
[disabled]="task?.status=='In_progress'"– Sarthak Aggarwal
Nov 12 at 10:03
you can conditionally disable the button
[disabled]="task?.status=='In_progress'"– Sarthak Aggarwal
Nov 12 at 10:03
add a comment |
4 Answers
4
active
oldest
votes
up vote
1
down vote
Use ngIf with your condition (status === Completed) to show/hide the button
<div class="pull-right">
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md" *ngIf="task?.status == 'Completed'"">
AutoCode Sync
</button>
</div>
answered Nov 12 at 10:08
Sandunka Mihiran
241116
add a comment |
up vote
0
down vote
Disable the button conditionally using [disabled]
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md" [disabled]="task?.status == 'In_progress'">
AutoCode Sync
</button>
answered Nov 12 at 10:06
Sarthak Aggarwal
63817
add a comment |
up vote
0
down vote
You can use [hidden] property on both the spinner and button but I'm not sure why you are using *ngFor="let task of tasksRes" do you get more than one buttons and spinner
<section *ngFor="let task of tasksRes">
<nav [hidden]="task?.status == 'Completed'" >
<span class="text-warning" *ngIf="task?.status == 'In_progress'"><i class="fa fa-spinner fa-spin"></i></span>
</nav>
<div class="pull-right" [hidden]="task?.status == 'In_progress'">
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md">
AutoCode Sync
</button>
</div>
</section>
this will act a toggle that shows and hides button based on the condition
You can either add a separate property as true and false to and read it based on your condition - hope this works - Happy coding !!
answered Nov 12 at 10:10
Rahul
9631315
add a comment |
up vote
0
down vote
You can add any document attribute by [attr.{{attribute}}] in angular.
<div class="pull-right">
<button mat-raised-button [attr.disabled]="task?.status == your_situation" color="primary" (click)="open();" class="btn-w-md">
AutoCode Sync
</button>
</div>
answered Nov 12 at 10:05
junk
236317
While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find how to write a good answer very helpful. Please edit your answer - From Review
– Nick
Nov 12 at 10:30
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%2f53259764%2fconditionally-show-and-hide-button-using-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
Use ngIf with your condition (status === Completed) to show/hide the button
<div class="pull-right">
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md" *ngIf="task?.status == 'Completed'"">
AutoCode Sync
</button>
</div>
answered Nov 12 at 10:08
Sandunka Mihiran
241116
add a comment |
up vote
1
down vote
Use ngIf with your condition (status === Completed) to show/hide the button
<div class="pull-right">
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md" *ngIf="task?.status == 'Completed'"">
AutoCode Sync
</button>
</div>
answered Nov 12 at 10:08
Sandunka Mihiran
241116
add a comment |
up vote
1
down vote
up vote
1
down vote
Use ngIf with your condition (status === Completed) to show/hide the button
<div class="pull-right">
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md" *ngIf="task?.status == 'Completed'"">
AutoCode Sync
</button>
</div>
answered Nov 12 at 10:08
Sandunka Mihiran
241116
Use ngIf with your condition (status === Completed) to show/hide the button
<div class="pull-right">
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md" *ngIf="task?.status == 'Completed'"">
AutoCode Sync
</button>
</div>
answered Nov 12 at 10:08
Sandunka Mihiran
241116
answered Nov 12 at 10:08
Sandunka Mihiran
241116
answered Nov 12 at 10:08
Sandunka Mihiran
241116
answered Nov 12 at 10:08
Sandunka Mihiran
241116
241116
add a comment |
add a comment |
up vote
0
down vote
Disable the button conditionally using [disabled]
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md" [disabled]="task?.status == 'In_progress'">
AutoCode Sync
</button>
answered Nov 12 at 10:06
Sarthak Aggarwal
63817
add a comment |
up vote
0
down vote
Disable the button conditionally using [disabled]
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md" [disabled]="task?.status == 'In_progress'">
AutoCode Sync
</button>
answered Nov 12 at 10:06
Sarthak Aggarwal
63817
add a comment |
up vote
0
down vote
up vote
0
down vote
Disable the button conditionally using [disabled]
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md" [disabled]="task?.status == 'In_progress'">
AutoCode Sync
</button>
answered Nov 12 at 10:06
Sarthak Aggarwal
63817
Disable the button conditionally using [disabled]
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md" [disabled]="task?.status == 'In_progress'">
AutoCode Sync
</button>
answered Nov 12 at 10:06
Sarthak Aggarwal
63817
answered Nov 12 at 10:06
Sarthak Aggarwal
63817
answered Nov 12 at 10:06
Sarthak Aggarwal
63817
answered Nov 12 at 10:06
Sarthak Aggarwal
63817
63817
add a comment |
add a comment |
up vote
0
down vote
You can use [hidden] property on both the spinner and button but I'm not sure why you are using *ngFor="let task of tasksRes" do you get more than one buttons and spinner
<section *ngFor="let task of tasksRes">
<nav [hidden]="task?.status == 'Completed'" >
<span class="text-warning" *ngIf="task?.status == 'In_progress'"><i class="fa fa-spinner fa-spin"></i></span>
</nav>
<div class="pull-right" [hidden]="task?.status == 'In_progress'">
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md">
AutoCode Sync
</button>
</div>
</section>
this will act a toggle that shows and hides button based on the condition
You can either add a separate property as true and false to and read it based on your condition - hope this works - Happy coding !!
answered Nov 12 at 10:10
Rahul
9631315
add a comment |
up vote
0
down vote
You can use [hidden] property on both the spinner and button but I'm not sure why you are using *ngFor="let task of tasksRes" do you get more than one buttons and spinner
<section *ngFor="let task of tasksRes">
<nav [hidden]="task?.status == 'Completed'" >
<span class="text-warning" *ngIf="task?.status == 'In_progress'"><i class="fa fa-spinner fa-spin"></i></span>
</nav>
<div class="pull-right" [hidden]="task?.status == 'In_progress'">
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md">
AutoCode Sync
</button>
</div>
</section>
this will act a toggle that shows and hides button based on the condition
You can either add a separate property as true and false to and read it based on your condition - hope this works - Happy coding !!
answered Nov 12 at 10:10
Rahul
9631315
add a comment |
up vote
0
down vote
up vote
0
down vote
You can use [hidden] property on both the spinner and button but I'm not sure why you are using *ngFor="let task of tasksRes" do you get more than one buttons and spinner
<section *ngFor="let task of tasksRes">
<nav [hidden]="task?.status == 'Completed'" >
<span class="text-warning" *ngIf="task?.status == 'In_progress'"><i class="fa fa-spinner fa-spin"></i></span>
</nav>
<div class="pull-right" [hidden]="task?.status == 'In_progress'">
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md">
AutoCode Sync
</button>
</div>
</section>
this will act a toggle that shows and hides button based on the condition
You can either add a separate property as true and false to and read it based on your condition - hope this works - Happy coding !!
answered Nov 12 at 10:10
Rahul
9631315
You can use [hidden] property on both the spinner and button but I'm not sure why you are using *ngFor="let task of tasksRes" do you get more than one buttons and spinner
<section *ngFor="let task of tasksRes">
<nav [hidden]="task?.status == 'Completed'" >
<span class="text-warning" *ngIf="task?.status == 'In_progress'"><i class="fa fa-spinner fa-spin"></i></span>
</nav>
<div class="pull-right" [hidden]="task?.status == 'In_progress'">
<button mat-raised-button color="primary" (click)="open();" class="btn-w-md">
AutoCode Sync
</button>
</div>
</section>
this will act a toggle that shows and hides button based on the condition
You can either add a separate property as true and false to and read it based on your condition - hope this works - Happy coding !!
answered Nov 12 at 10:10
Rahul
9631315
answered Nov 12 at 10:10
Rahul
9631315
answered Nov 12 at 10:10
Rahul
9631315
answered Nov 12 at 10:10
Rahul
9631315
9631315
add a comment |
add a comment |
up vote
0
down vote
You can add any document attribute by [attr.{{attribute}}] in angular.
<div class="pull-right">
<button mat-raised-button [attr.disabled]="task?.status == your_situation" color="primary" (click)="open();" class="btn-w-md">
AutoCode Sync
</button>
</div>
answered Nov 12 at 10:05
junk
236317
While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find how to write a good answer very helpful. Please edit your answer - From Review
– Nick
Nov 12 at 10:30
add a comment |
up vote
0
down vote
You can add any document attribute by [attr.{{attribute}}] in angular.
<div class="pull-right">
<button mat-raised-button [attr.disabled]="task?.status == your_situation" color="primary" (click)="open();" class="btn-w-md">
AutoCode Sync
</button>
</div>
answered Nov 12 at 10:05
junk
236317
While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find how to write a good answer very helpful. Please edit your answer - From Review
– Nick
Nov 12 at 10:30
add a comment |
up vote
0
down vote
up vote
0
down vote
You can add any document attribute by [attr.{{attribute}}] in angular.
<div class="pull-right">
<button mat-raised-button [attr.disabled]="task?.status == your_situation" color="primary" (click)="open();" class="btn-w-md">
AutoCode Sync
</button>
</div>
answered Nov 12 at 10:05
junk
236317
You can add any document attribute by [attr.{{attribute}}] in angular.
<div class="pull-right">
<button mat-raised-button [attr.disabled]="task?.status == your_situation" color="primary" (click)="open();" class="btn-w-md">
AutoCode Sync
</button>
</div>
answered Nov 12 at 10:05
junk
236317
edited Nov 13 at 1:41
answered Nov 12 at 10:05
junk
236317
answered Nov 12 at 10:05
junk
236317
answered Nov 12 at 10:05
junk
236317
236317
While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find how to write a good answer very helpful. Please edit your answer - From Review
– Nick
Nov 12 at 10:30
add a comment |
While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find how to write a good answer very helpful. Please edit your answer - From Review
– Nick
Nov 12 at 10:30
While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find how to write a good answer very helpful. Please edit your answer - From Review
– Nick
Nov 12 at 10:30
While this might answer the authors question, it lacks some explaining words and/or links to documentation. Raw code snippets are not very helpful without some phrases around them. You may also find how to write a good answer very helpful. Please edit your answer - From Review
– Nick
Nov 12 at 10:30
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%2f53259764%2fconditionally-show-and-hide-button-using-angular-6%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 conditionally disable the button
[disabled]="task?.status=='In_progress'"– Sarthak Aggarwal
Nov 12 at 10:03