Angular expressions are code snippets that are used to bind application data to HTML. Angular resolves the expressions, and the result is returned to where the expression is written. Angular expressions are usually written in double braces: {{ expression }} similar to JavaScript.
Syntax:
{{ expression }}
Following is a list of some differences between Angular expressions and JavaScript expressions:
1. The most crucial difference between Angular expressions and JavaScript expressions is that the Angular expressions allow us to write JavaScript in HTML. On the other hand, the JavaScript expressions don't allow.
2. The Angular expressions are evaluated against a local scope object. On the other hand, the JavaScript expressions are evaluated against the global window object. We can understand it better with an example. Suppose we have a component named test:
- import { Component, OnInit } from '@angular/core';
- @Component({
- selector: 'app-test',
- template: `
- <h4>{{message}}</h4>,
- styleUrls: ['./test.component.css']
- })
- export class TestComponent implements OnInit {
- message:string = ?Hello world?;
- constructor() { }
- ngOnInit() {
- }
- }
In the above example, we can see that the Angular expression is used to display the message property. In the present template, we are using Angular expressions, so we cannot access a property outside its local scope (in this case, TestComponent). This proves that Angular expressions are always evaluated based on the scope object rather than the global object.
3. The Angular expressions can handle null and undefined, whereas JavaScript expressions cannot.
See the following JavaScript example:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>JavaScript Test</title>
- </head>
- <body>
- <div id="foo"><div>
- </body>
- <script>
- 'use strict';
- let bar = {};
- document.getElementById('foo').innerHTML = bar.x;
- </script>
- </html>
After running the above code, you see undefined displayed on the screen. Although it's not ideal to leave any property undefined, the user does not need to see this.
Now see the following Angular example:
- import { Component, OnInit } from '@angular/core';
- @Component({
- selector: 'app-new',
- template: `
- <h4>{{message}}</h4> `,
- styleUrls: ['./new.component.css']
- })
- export class NewComponent implements OnInit {
- message:object = {};
- constructor() { }
- ngOnInit() {
- }
- }
In the above example, you will not see undefined being displayed on the screen.
4. In Angular expressions, we cannot use loops, conditionals, and exceptions. The difference which makes Angular expressions quite beneficial is the use of pipes. Angular uses pipes (known as filters in AngularJS) to format data before displaying it.
See this example:
- import { Component, OnInit } from '@angular/core';
- @Component({
- selector: 'app-new',
- template: `
- <h4>{{message | lowercase}}</h4>,
- styleUrls: ['./new.component.css']
- })
- export class NewComponent implements OnInit {
- message:string = "HELLO JAVATPOINT";
- constructor() { }
- ngOnInit() {
- }
- }
In the above example, we have used a predefined pipe called lowercase, which transforms all the letters in lowercase. If you run the above example, you will see the output displayed as "hello javatpoint".
On the other hand, JavaScript does not have the concept of pipes.
