How to enable and disable a mat-button based on a select form

Question

This is my mat-button:

<button class="example-20-width" mat-raised-button disabled>Edit Client</button> 

How can I control it and make it disabled or not based on whether a select form is emtry or not?

Here is my field form:

<mat-form-field class="example-full-width">   <mat-select  placeholder="Select customer">     <mat-option *ngFor="let food of books.data"          [value]="food.company">       {{food.company}}     </mat-option>     <mat-option>     </mat-option>   </mat-select> </mat-form-field> 

Answer 1

If you look at Angular Material Demos (button), which is an older version of Angular Material demo, there is a button performing this.

This demo used to correspond (it's now outdated) to the demo on the Angular GitHub page, see: github.com - Angular Material - src/demo-app/button.

You can simply use:

<button mat-button [disabled]="isDisabled"> 

where isDisabled is a boolean define in your component.

Answer 2

use [disabled] atttribute with button

<button class="example-20-width"  [disabled]="true" mat-raised-button disabled>Edit Client</button>