0 votes
in Education by (1.0m points)
How are Angular expressions different from JavaScript expressions?

1 Answer

0 votes
by (1.0m points)

The first and perhaps, the biggest difference is that Angular expressions allow us to write JavaScript in HTML which is not the case when it comes to JavaScript expressions.
Next, Angular expressions are evaluated against a local scope object whereas JavaScript expressions against global window object. Let's understand that better with an example :

Consider the following 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() {
        }
      }
    
  

As one can see that Angular expression is used to display message property of a component. Since we are using Angular expressions, in the present template, we cannot access a property outside of its local scope, which in this case is TestComponent.
This proves that Angular expressions are always evaluated based on scope object rather than the global object.

Next difference is how Angular expressions handle null and undefined.
Consider 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>
    
  

If you run the above code, you will 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 consider 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() {
        }

      }
    
  

If you render the above component, you will not see undefined being displayed on the screen.

Next, in Angular expressions one cannot use loops, conditionals and exceptions.

The difference which makes Angular expressions quite beneficial is the use of pipes. Angular uses pipes(called filters in AngularJS), which can be used to format data before displaying it. Let’s see one predefined pipe in action:

    
      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 WORLD";
        constructor() { }

        ngOnInit() {
        }

      }
    
  

In the above code we have used a predefined pipe called lowercase, which transforms all the letters in lowercase. Therefore, if you render the above component, you will see “hello world” being displayed.

In contrast, JavaScript does not have the concept of pipes.

Learn More with Blogmepost

blogmepost Online Test

NCERT Questions & Answers

  • NCERT Class 12 Maths Solutions
  • NCERT Class 12 Physics Solutions
  • NCERT Class 12 Chemistry Solutions
  • NCERT Class 12 Biology Solutions
  • NCERT Class 10 Science Solutions
  • NCERT Class 10 Maths Solutions
blogmepost Q&A

CBSE Questions & Answers Portal

  • CBSE Class 12 Maths Questions Answers
  • CBSE Class 12 Physics Questions Answers
  • CBSE Class 12 Chemistry Questions Answers
  • CBSE Class 12 Biology Questions Answers
  • CBSE Class 10 Science Questions Answers
  • CBSE Class 10 Maths Questions Answers
Blogmepost

Learn Math Formula, Revise Notes

  • JEE Crash Course Questions & Answers
  • NCERT Course Questions and Answers
  • CBSE Board Questions Bank
  • ICSE Board Questions Bank
  • Free Study Materials
  • Question & Answers Bank for All Classes
  • Text Book Solutions
  • Previous Year Question Paper
  • NCERT Book Solutions

  • NCERT
  • NCERT Solutions
  • NCERT Solutions for Class 12 Maths
  • NCERT Solutions for Class 12 Physics
  • NCERT Solutions for Class 12 Chemistry
  • NCERT Solutions for Class 12 Biology
  • NCERT Solutions for Class 11 Maths
  • NCERT Solutions for Class 11 Physics
  • NCERT Solutions for Class 11 Chemistry
  • NCERT Solutions for Class 11 Biology
  • NCERT Solutions for Class 10 Maths
  • NCERT Solutions for Class 10 Science
  • NCERT Solutions for Class 9 Maths
  • NCERT Solutions for Class 9 Science
  • CBSE Classes

  • CBSE Class 5 Questions
  • CBSE Class 6 Questions
  • CBSE Class 7 Questions
  • CBSE Class 8 Questions
  • CBSE Class 9 Questions
  • CBSE Class 10 Questions
  • CBSE Class 10 Maths Questions
  • CBSE Class 11 Commerce Questions
  • CBSE Class 11 Engineering Questions
  • CBSE Class 11 Medical Questions
  • CBSE Class 12 Commerce Questions
  • CBSE Class 12 Maths Questions
  • CBSE Class 12 Engineering Questions
  • CBSE Class 12 Medical Questions
  • BOARDS

  • CBSE
  • ICSE
  • NCERT
  • IGCSE
  • Andhra Pradesh
  • Bihar
  • Gujarat
  • Jharkhand
  • Karnataka
  • Kerala
  • Madhya Pradesh
  • Maharashtra
  • Punjab
  • Rajasthan
...