Using & (bitwise AND operator) in Angular ng-if expressions

Question

I can't get the & operator to work in an Angular ng-if expression (to use with some bit flags). Suppose we have some HTML like this:

<div ng-if="value & 2"> </div>

If value equals 3, then the bitwise operation should return 2 and thus a true value.

However, Angular throws a Syntax Error exception every time. Is the operation not allowed? Or am I doing something wrong?

Link to the plunker.

Edit: I already resolved my issue by using a simple function that does the job:

$scope.checkFlag = function(value, flag){
   return value & flag;
}

But I really don't like this solution. Is there a way to use it in an ng-if (without using the function, obviously)?

Michael Liu · Accepted Answer · 2016-09-02 14:58:55Z

15

You cannot use the bitwise & operator in an Angular expression. According to the documentation:

Angular expressions are like JavaScript expressions with the following differences:

...

You cannot use Bitwise, , or void operators in an Angular expression.

If you want to run more complex JavaScript code, you should make it a controller method and call the method from your view.

A note on nomenclature: & is the bitwise AND operator; && is the logical AND operator.

UPDATE: Your checkFlag function is probably the best workaround because its name makes it clear what it does (and that's what I would use), but if you absolutely don't want an extra function, you can use the following equivalent expression:

<div ng-if="value % 4 >= 2"> </div>

In general, (value & x) != 0 (where x is a power of 2) is equivalent to value % (2 * x) >= x.

edited Sep 2, 2016 at 14:58

answered Sep 2, 2016 at 14:40

Michael Liu

55.8k14 gold badges126 silver badges158 bronze badges

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

Comments

Jay · Accepted Answer · 2021-02-19 11:08:16Z

4

One can accomplish this with a bitwise pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'hasFlags'
})
export class HasFlagsPipe implements PipeTransform {

  transform(flagsL: number, flagsR: number): boolean {
    return (flagsL & flagsR) != 0;
  }

}

Usage:

<div [hidden]="flagsL | hasFlags : flagsR">

Note: I'm using angular 2+ but came across this post so hopefully this helps someone else.

answered Feb 19, 2021 at 11:08

Jay

3,5138 gold badges42 silver badges57 bronze badges

Comments

vilius · Accepted Answer · 2016-09-02 14:40:52Z

1

I am not sure what you want to accomplish here but you are using a bit-wise AND operator. And in the angular documentation it says:

No Bitwise, Comma, And Void Operators: You cannot use Bitwise, , or void operators in an Angular expression.

AngularJS expression

answered Sep 2, 2016 at 14:40

vilius

111 bronze badge

Comments

StephenTG · Accepted Answer · 2016-09-02 14:42:49Z

1

The problem is that you're using & instead of &&. & is the bitwise operator, and Angular doesn't allow bitwise operators in expressions.

edited Sep 2, 2016 at 14:42

answered Sep 2, 2016 at 14:37

StephenTG

2,6876 gold badges29 silver badges38 bronze badges

3 Comments

KreepN Over a year ago

I'd assume he is in fact trying to use the bit wise operator so I don't know if your first sentence is true. Unless && somehow mimics that behavior in angular and I'm an idiot.

illeb Over a year ago

Yeah, i am trying to use specifically the bitwise operation. I want to use the bitwise operation in order to handle my bit flags.

StephenTG Over a year ago

Ah, I see. Well, as Michael and Vilius have shown, Angular doesn't allow bitwise in their expressions.

KreepN · Accepted Answer · 2016-09-02 14:44:32Z

1

Since no one has provided a solution I'd assume you could just modify your html to:

<body ng-controller="MainCtrl">
   <div ng-if="check(value,2)">Hey! </div>
</body>

with

$scope.check = function(val, providedInt){
   return val & providedInt;
 };

See plunkr!

answered Sep 2, 2016 at 14:44

KreepN

8,5981 gold badge43 silver badges58 bronze badges

Collectives™ on Stack Overflow

Using & (bitwise AND operator) in Angular ng-if expressions

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related