Check if an array is empty hence disable a button

Question

Am trying to disable a button if an array isemty but fails

<button [disabled]="(users.length ==0 )?true:false">Send mass emails</button>

IN the ts file

users: UsersModel[];

THe above throws an error

Bindings cannot contain assignments at column

How do i disable that button if the array is emty

Answer 1

It doesn't look like you initialized the users: UsersModel[] array in your component so it's coming back as undefined and you are trying to access length property of an undefined object/array. Try the following to disable the button if users array has NOT been initialized or the length is equal to 0:

<button type="button" [disabled]="!users || users.length === 0">Send Mass Emails</button>

Here is plunkr demonstrating this in action.

What you could also consider is initializing the user array to an empty array in your component:

users: UsersModel[] = [];

Then you could simply do to disable/enable the button based on users length being zero/falsy:

<button type="button" [disabled]="!user.length">Send mass emails</button>

Here is a plunkr demonstrating initializing the users array to an empty array and checking length to disable button accordingly.

Hopefully that helps!

Answer 2

<button [disabled]="users.length===0?true:false">Send mass emails</button>

You can add you condition to the disabled tag like the following. even you can check for the users array then check the length like

<button [disabled]="!user || users.length===0?true:false">Send mass emails</button>