Angular material button disabled not working on common component

Question

I am using Angular material button to create a common button component to be used in my Angular 13 application. When I use the button component, the 'disabled' property does not work. I mean the button looks greyed out but its still clickable. Here is my code, am I missing anything?

COMMON COMPONENT:

<button mat-button [disabled]="disabled" (click)="clickViewDetails(label)"><mat-icon *ngIf="icon">{{ icon }}</mat-icon> {{ label }}</button>

@Input() disabled:boolean = true;

TEMPLATE:

This does not work: <my-button (click)="signIn()" [disabled]="signBtn_disabled"> </my-button>

This works : <button mat-button [disabled]="signBtn_disabled" (click)="signIn()">Sign In</button>

Eliseo · Accepted Answer · 2022-04-18 11:12:43Z

2

The (click) is "attached" to you component, not to the mat-button. It's the reason you can "click" your component. You can use some like

<my-button (click)="!signBtn_disabled && signIn()" 
      [disabled]="signBtn_disabled">

Yes, is very common use the construction (event)="condition && function()". If the condition is not fullfilled, the function is not executed

Other option is that your component has an Output

@Output() customClick:eventEmitter=new EventEmitter<any>()

<mat-button (click)="customClick.emit(true)" [disabled]=...>

And you use

<my-button (customClick)="signIn()"></my-button>

Update I'm asking me if we can call to our "Output" click.

Saddly the click happens always we make a "click" in our component (not only in the inner button). So Imagine we have in out my-button component some like

  <h1>I'm a custom button</h1>
  <button (click)="onClick($event)" [disabled]="...">button</button>`

  //we call out Output "click"

  @Output()click:EventEmitter<any>=new EventEmitter<any>()
  onClick(event)
  {
    event.stopPropagation()
    this.click.next(true)
  }

We can use in out parent

<my-button (click)="click($event)"></my-button>

All look like good if we "click" in the button, but if we click in the "h1", the event click happens in our parent. The only is check the event in parent

 click($event){
   if ($event===true)
   {
       ..do something..
   }
 }

Or in parent

 <my-button (click)="$event===true && click($event)"></my-button>

edited Apr 18, 2022 at 11:12

answered Apr 18, 2022 at 9:27

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

2 Comments

Yogesh Over a year ago

Thanks, that worked !!!!! But can I do some changes in my custom component so that I don't have to change it everywhere else?

Eliseo Over a year ago

I update the answer to add the case you call to the "Output" click but sadly, if your "my-button" is some more than a button, the "click" event happens always :(

Collectives™ on Stack Overflow

Angular material button disabled not working on common component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related