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.
