conditionally show and hide button using angular 6

Question

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.

you can conditionally disable the button [disabled]="task?.status=='In_progress'" — Sarthak Aggarwal
– Sarthak Aggarwal, Commented Nov 12, 2018 at 10:03

Sandunka Mihiran · Accepted Answer · 2018-11-12 10:08:49Z

3

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, 2018 at 10:08

Sandunka Mihiran

5664 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul · Accepted Answer · 2018-11-12 10:10:20Z

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 !!

junk · Accepted Answer · 2018-11-13 01:41:58Z

0

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>

edited Nov 13, 2018 at 1:41

answered Nov 12, 2018 at 10:05

junk

9974 gold badges11 silver badges29 bronze badges

1 Comment

Nick Over a year ago

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

Sarthak Aggarwal · Accepted Answer · 2018-11-12 10:06:35Z

-1

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, 2018 at 10:06

Sarthak Aggarwal

2,3121 gold badge10 silver badges12 bronze badges

Collectives™ on Stack Overflow

conditionally show and hide button using angular 6

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related