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;
}
The result of the first expression is -8 and the result of the second expression is 16.
References:
- PR: https://github.com/angular/angular/pull/59894
- PR: https://github.com/angular/angular/pull/60101
- Github Repo: https://github.com/railsstudent/angular20-new-features/blob/main/projects/exponential-on-template-demo/src/app/app.component.ts
- Github Page: https://railsstudent.github.io/angular20-new-features/exponential-on-template-demo/
Top comments (0)