Angular 4 Conditional styling

Question

I have this html code which works great:

<button class="button-style standard-button button-blue" (click)="onOkClick()"
[ngClass]="{'disabled': !hasUnsavedNotes()}" [disabled]="!hasUnsavedNotes()">
Save and close
</button>

My question is how do I change class="button-style standard-button button-blue" to class="button-style standard-button button-grey" when hasUnsavedNotes() returns false? Or simply how do I change the button back color when its disabled? Thanks.

Christian G Fritsch · Accepted Answer · 2018-02-14 19:34:04Z

10

You can just do this little adjustment:

<button 
    [class.button-blue]="!hasUnsavedNotes()"
    [class.button-grey]="hasUnsavedNotes()"
    class="button-style standard-button" 
    (click)="onOkClick()"
    [disabled]="!hasUnsavedNotes()">
    Save and close
</button>

[class.button-blue]="!hasUnsavedNotes()"

will add button-blue css class when !hasUnsavedNotes()returns true and will remove this class when !hasUnsavedNotes()returns false. Is the same to:

[class.button-grey]="hasUnsavedNotes()"

You can remove the [disabled] directive if you wish.

Here is a helpful list of "tricks" to use in Angular: Angular - Cheat Sheet

answered Feb 14, 2018 at 19:34

Christian G Fritsch

5781 gold badge4 silver badges12 bronze badges

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

2 Comments

Phil O Over a year ago

Thanks, much simpler than my approach below. Any idea how I can change the cursor from a hand to the default when the button is disabled?

Christian G Fritsch Over a year ago

You can style it with css 3.0 :disabled status selector, like this: .my-btn:disabled { cursor: default }

Manzur Khan · Accepted Answer · 2018-02-14 18:23:08Z

2

[ngClass]="{'button-blue': hasUnsavedNotes(), 'button-grey': !hasUnsavedNotes()}"

answered Feb 14, 2018 at 18:23

Manzur Khan

2,5164 gold badges26 silver badges46 bronze badges

2 Comments

Phil O Over a year ago

How do I implement your suggestion along with [ngClass]="{'disabled': !hasUnsavedNotes()}"

Manzur Khan Over a year ago

ngClass takes in an object, just separate the value with a comma like I did above

Phil O · Accepted Answer · 2018-02-14 18:30:02Z

This may not be the best way but this solution worked:

<button *ngIf="hasUnsavedNotes() else disable_button"
    class="button-style standard-button button-blue"
    (click)="onOkClick()"
    [ngClass]="{'disabled': !hasUnsavedNotes()}" 
    [disabled]="!hasUnsavedNotes()">
          Save and close
</button>
<ng-template #disable_button>
    <button class="button-style standard-button button-disabled"
        (click)="onOkClick()"
        [ngClass]="{'disabled': !hasUnsavedNotes()}" 
        [disabled]="!hasUnsavedNotes()">
            Save and close
    </button>
</ng-template>

Collectives™ on Stack Overflow

Angular 4 Conditional styling

3 Answers 3

2 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Related