CODEWITHSUNDEEP
javascriptangulartypescript
youi
youi

Reputation: 2047

conditionally show and hide button using angular 6

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.

Upvotes: 1

Views: 17702

Answers (4)

junk
junk

Reputation: 987

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>

Upvotes: 0

Rahul
Rahul

Reputation: 2128

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

Upvotes: 1

Sandunka Mihiran
Sandunka Mihiran

Reputation: 565

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>

Upvotes: 3

Sarthak Aggarwal
Sarthak Aggarwal

Reputation: 2312

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>

Upvotes: -1

Related Questions