How to disable button in Angular if list / array is not empty?

Question

In my component I'm getting data from my service:

ngOnInit() {
  this._sharedService.
    getReceiptItem().takeUntil(this.ngUnsubscribe).
    subscribe(products => this.receiptItems = products);
}

So how can I disable a button if my array this.receiptItems has any items?

I've tried something like this:

 <div class="top-left">
    <button [disabled]="receiptItems.count>0" type="button" [routerLink]="['/administration']"><i class="fas fa-bars fa-fw"></i></button>
 </div>

But obliviously that is not a solution..

Thanks

Sajeetharan · Accepted Answer · 2018-07-05 08:42:22Z

4

You need Array.length in javascript

   <button [disabled]="receiptItems.length>0" type="button" [routerLink]="['/administration']"><i class="fas fa-bars fa-fw"></i></button>

answered Jul 5, 2018 at 8:42

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Sajeetharan Over a year ago

do this [disabled]="receiptItems?.length

Roxy'Pro Over a year ago

Yes. Thanks a lot for your help

Super User · Accepted Answer · 2018-07-05 09:01:33Z

2

Update your code with following:

<div class="top-left">
    <button [disabled]="receiptItems && receiptItems.length>0" type="button" [routerLink]="['/administration']"><i class="fas fa-bars fa-fw"></i></button>
 </div>

answered Jul 5, 2018 at 9:01

Super User

9,6623 gold badges34 silver badges48 bronze badges

Comments

Krishna Rathore · Accepted Answer · 2018-07-05 08:41:51Z

1

You can try with length

component.ts

receiptItems:Array<any>;
ngOnInit() {
  this._sharedService.
    getReceiptItem().takeUntil(this.ngUnsubscribe).
    subscribe(products => this.receiptItems = products);
}

component.html

<div class="top-left">
    <button [disabled]="receiptItems.length > 0" type="button" [routerLink]="['/administration']"><i class="fas fa-bars fa-fw"></i></button>
 </div>

answered Jul 5, 2018 at 8:41

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Comments

Roopesh Kumar Ramesh · Accepted Answer · 2018-07-05 10:01:41Z

1

<button *ngIf="receiptItems!=undefined" [disabled]="receiptItems.length>0" type="button" [routerLink]="['/administration']"><i class="fas fa-bars fa-fw"></i></button>

edited Jul 5, 2018 at 10:01

answered Jul 5, 2018 at 9:43

Roopesh Kumar Ramesh

1581 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to disable button in Angular if list / array is not empty?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related