Exponential Operator is Supported on Template

#angular #tutorial #webdev

Angular 20 will support exponential operator on template.

The feature is in 20.0.0-next.0; therefore, it can be tested after updating the Angular dependencies to the next version.

ng update @angular/cli --next
ng update @angular/core --next

Demo 1: Apply exponential operator on two numbers

<div class="row">
     <p>Case 1: ** operator applied to two integers.</p>
     <p>{{ a }} ** {{ b }} = {{ a ** b }}</p>
</div>

export class AppComponent {
 a = 2;
 b = 3;
}

The result is evaluated to 8 on the template

Demo 2: The exponential operator is right associately

<div class="row">
    <p>Case 2: ** operator is right associative.</p>
    <p>{{ a }} ** {{ b }} ** {{ c }} = {{ a ** b ** c }}</p>
    <p>{{ a }} ** ({{ b }} ** {{ c }}) = {{ a ** (b ** c) }}</p>
 </div>

export class AppComponent {
 a = 2;
 b = 3;
 c = 2;
}

The result is evaluated to 512 on the template.

Demo 3: Parentheses are required around unary operator when it is the base fo the exponential

<div class="row">
     <p>Case 3: parentheses are required around uary operator when it is the base of the ** operator.</p>
      <p>(-2) ** {{ e }} = {{ (-2) ** e }}</p>
      <p>(-2) ** {{ f }} = {{ (-2) ** f }}</p>
</div>

export class AppComponent {
 e = 3;
 f = 4;
}