How do I conditionally add mat-raised-button?

Question

I have a button on my screen where if the user has already added clicked on it, it is a mat-filled-button but if I haven't clicked on it, it is a mat-button

My code looks like this

 <button
          *ngIf="myVote !== 'UPVOTE'"
          mat-button
          color="primary"
          (click)="onVote('UPVOTE')"
        >
          UPVOTE
        </button>
        <button
          *ngIf="myVote === 'UPVOTE'"
          mat-flat-button
          color="primary"
          (click)="onVote('NONE')"
        >
          UPVOTE
        </button>

Basically I have two buttons and only one shows. Obviously, this is very ugly.

Is there a way where I can achieve the same outcome with only one button and it conditionally is a mat-flat-button or a mat-button based on a set of logic?

these might help: https://stackoverflow.com/questions/44597077/apply-a-directive-conditionally and https://stackoverflow.com/questions/37021355/angular-2-how-to-conditionally-apply-attribute-directive — Jojofoulk, Sep 13 '19 at 06:36
Have a look at this: https://stackoverflow.com/questions/36745734/how-to-add-conditional-attribute-in-angular-2/36745752 — John, Sep 13 '19 at 06:43
Why not use button toggle instead: https://material.angular.io/components/button-toggle/overview? — 31piy, Sep 13 '19 at 07:04

Adrita Sharma · Accepted Answer · 2019-09-13T07:01:52.710

8

Try like this:

<button
  mat-button 
  [class.mat-flat-button]="myVote === 'UPVOTE'"
  color="primary"
  (click)="onVote(myVote === 'UPVOTE'? 'NONE' :'UPVOTE')"
>
  UPVOTE
</button>

See Working Demo

_ I have used raised button the demo for better visibility.

edited Sep 13 '19 at 07:01

answered Sep 13 '19 at 06:36

Adrita Sharma

19,704
10
55
71

just wondering why is it mat-button and not [class.mat-button]="myVote !== 'UPVOTE'"? – Diskdrive Sep 14 '19 at 04:56
Because you want to have the mat-button displayed even when myVote isn't set – Adrita Sharma Sep 14 '19 at 05:59

John · Answer 2 · 2019-09-13T06:54:15.173

-1

From this answer: https://stackoverflow.com/a/36745752/1471485

You could do something like this:

<button
  [attr.mat-button]="myVote !== 'UPVOTE'"
  [attr.mat-flat-button]="myVote === 'UPVOTE'"
  color="primary"
  (click)="onVote()"> <!-- Alternate the vote in the function -->
  UPVOTE
</button>

onVote(){
   if(this.myVote === 'UPVOTE') this.myVote = 'NONE';
   else this.myVote = 'UPVOTE';
}

edited Sep 13 '19 at 06:54

answered Sep 13 '19 at 06:47

John

8,106
4
44
65

Hi, so I think conceptually your answer is better than Adrita Sharma's answer - she is updating the class which basically requires an understanding of what mat-button and mat-flat-button is doing under the surface. However, your answer doesn't actually work because mat-button and mat-flat-button are selectors within the MatButton component which I don't think you can make conditional... – Diskdrive Sep 14 '19 at 11:10
1

i dunno, i'm just looking through https://github.com/angular/components/blob/master/src/material/button/button.ts now but it does seem like it only checks to see if that selector is there and if so, adds a class – Diskdrive Sep 14 '19 at 11:11
with `[attr.mat-button]` & `[attr.mat-icon-button]` it does not work, unfortunately. For example there are some directives which work with this notation like `[attr.mat-align-tabs] ` but mat-button not work. – Kurkov Igor May 03 '20 at 07:25

How do I conditionally add mat-raised-button?

2 Answers2