(change) Event Hook In Angular2

I know about the (change) event Binding in angular2 but i am surprised why my code is not working as expected? My code is here.. http://plnkr.co/edit/9pSWSeqBc5oaSAtsfwNY?p=preview

Solution 1:

You should separate them with ; instead of && operator.

If first expression goes wrong, it would not evaluate the next expression.

(change)="holiday= !holiday;employee= !employee"

How && operator works?

1. Suppose a && b, if both are true then only it returns true(in short there shouldn't be any false value otherwise it will return false).
2. When evaluating a && b code will first check a value is true then only the interpreter will goes b value to evaluate it. If a value it self is false then it don't evaluate(check) b's value, and a && b expression will return false.

Before you were having holiday= !holiday && employee= !employee. On initial load both holiday & employee has false value. When you click on the checkbox it evaluates holiday= !holiday && employee= !employee, both holiday & employee value becomes true.

Basically behind the scene when 1st holiday= !holiday get evaluated, holiday becomes true to false & holiday= !holidayexpression return latest value(returns true), whether 2nd expression does the same thing & returns true.

Now holiday = true & employee = true. When you click on the check box again. It calls change event & again try to evaluate holiday= !holiday && employee= !employee. Where holiday= !holiday return false, so then as I mention above How && operator works?. It doesn't care about the next part of expression, and returns false value.

Now holiday = false & employee = true. If you click on checkbox again, then holiday turns out to true & proceed to evaluate other part of expression by which employee turns out to true from false.