Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

Pipe precedence in template expressions

Sometimes you want to choose between two values, based on some condition, before passing the choice to the pipe. You could use the JavaScript ternary operator (?:) in the template to make that choice.

Beware! The pipe operator has a higher precedence than the JavaScript ternary operator (?:).

If you simply write the expression as if it were evaluated left-to-right, you might be surprised by the result. For example,

      
      condition ? a : b | pipe
    

is parsed as

      
      condition ? a : (b | pipe)
    

The value of b passes through pipe; the value of a will not.

If you want the pipe to apply to the result of the ternary expression, wrap the entire expression in parentheses. For example,

      
      (condition ? a : b) | pipe
    

In general, you should always use parentheses to be sure Angular evaluates the expression as you intend.

The "Pipes and Precedence" section of the pipes examplepipes example explores this issue in more detail.

Last reviewed on Mon Aug 14 2023