CODEWITHSUNDEEP
htmlangularhtml-tableangular10
Expert Labs
Expert Labs

Reputation: 92

Disable a button based on condition

I am getting data from a server and I want to filter out a particular column. What I want is that if a column bought(boolean) says true I must disable the edit button sideby if its false the edit must be shown

enter code here

            <div *ngIf="isbaker">
    <div class="table-responsive">
        <table class="table">
            <thead class="table_header">
                <tr>
                    
                    <th>Customer</th>
                    <th>Name</th>
                    <th>Bought</th>
     
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let baker of shop;">            
                    <td>{{  baker.customer }}</td>
                    <td>{{ baker.name}}</td>
                    <td>{{  baker.bought}}</td>
               
                    

                    <td  *ngIf="isButton">
                        <button mat-icon-button matTooltip=" Edit" class="iconbutton" (click)="isbakerEdit(baker)"
                            color="primary">
                            <mat-icon style="color: gray;" aria-label="Edit">edit</mat-icon>
                        </button>
                    </td>  
                </tr>
            </tbody> 
        </table>`

Upvotes: 0

Views: 6772

Answers (2)

Gopal Mishra
Gopal Mishra

Reputation: 1935

You can use the disabled directive provided by Angular.

<td  *ngIf="isButton">
   <button mat-icon-button matTooltip=" Edit" class="iconbutton"(click)="isbakerEdit(baker)" 
       color="primary" [disabled]="baker.bought == true">
       <mat-icon style="color: gray;" aria-label="Edit">edit</mat-icon>
   </button>
</td>

Upvotes: 2

Nadhir Houari
Nadhir Houari

Reputation: 410

   <button mat-icon-button matTooltip=" Edit" class="iconbutton"(click)="isbakerEdit(baker)" 
       color="primary" [disabled]="baker?.bought">
       <mat-icon style="color: gray;" aria-label="Edit">edit</mat-icon>
   </button>

All what you have to do is to call this [disabled]="baker?.bought

Upvotes: 1

Related Questions