Menu List

Angular Interpolation

To show Interpolation we are going to use the ‘Hellow World’ project we have created before with a component name test, in our previous angular tutorial. Or you can create a new project also for the interpolation.

What is an interpolation:

In one word it can be said that interpolation is used to make a content dynamic.

So if have to make a content portion dynamic, of a component, that is the value of the template will be provided by the class of the component and maybe is fetched from a web service or API or from some other services.

Now we stored some value in a property of the class and need to display the value of the property in a portion of the template, then we have to use the double curly bracket and have to enclose the property name by starting the double curly bracket and closing the double curly bracket like the below code

<h1>
hellow {{ name }}
</h1>

Now we are going to see the full code of the test.component.ts file

import { Component, OnInit } from '@angular/core';

@component({
       selector: 'app-test',
       template: `
                 <h1> Hellow {{ name }} </h1>
                 `,
       styles: [`
                h1{
                   color: green;
                }
               `]
       })

export class TestComponent implements OnInit{
       public name = 'World';
       
       Constructor(){}

       OnInit(){

       }

}

The output for the component will be Hellow World, Here on the above code, the {{ name }} will be replaced with its declared name properties value ‘World’ inside the class.

Now let’s discuss what we can do and what can not using Interpolation

  1. The first thing is, which we have already discussed in this section of the tutorial that, we can populate the value of the property of the class.
  2. We can use regular expressions using interpolation, below code is a small example of a regular expression
    {{ 2+2 }}
    the above interpolation expression will give an output of 4 by adding the 2 values during the runtime.
  3. String Concatenation: If we want to concatenate two strings or more provided by the property or direct string, we can make the contamination possible using interpolation.
    let’s describe with an example:
    I) suppose Hellow is a string
    ii) and World is another string provided by the property name
    then the code example will be
    {{ ‘Hellow ‘ + name }}
    The browser will give an output of ‘Hellow World’ After compilation.

    Here it’s noticeable that two or more strings can be concatenated by placing a plus(+) sign between the 2 or more strings.

    Here angular will replace the name property with its property value ‘World’ and then displays the contamination result of the two string in the browser.
  4. We can use the javascript properties and methods, it may be a predefined default javascript method or you can define the method inside the class.

    Let’s describe with some examples:
    The javascript predefined method:

    {{ name.toUppercase() }}

    and it will display ‘WORLD’ in uppercase.

    Making a method in component class:

    We are going to create a method inside the class of the component, let’s suppose the method name is give_the_prefix

    give_the_prefix(){
    return ‘All ‘ + this.name
    }

    and in the template have to write

    {{ give_the_prefix() }}

    Now on the browser, you will be able to see the output as “All World”.

So they are some things we can do using interpolation.

Now we are going to discuss the things we can not do using interpolation.

  1. The first thing is we can not assign a value to a property inside an interpolation.
    {{ total = 2+2 }}

    it will not give an output but will be to see the error if you open your console.
  2. We cannot use any default global variables of javascript like ‘window’.
    below is an example
    {{ window.location.href }}
    the interpolation will not give output but if you open your console you will find some error.

Here some notable thing is if you need some global variables or need to assign some value in a property then you have to define the property on the class of the component and then inside the class, you have to assign the value to the property for both global variable and normal value.

So finally can be said that using interpolation, we can bind data from the component class to the template. And the syntax is a double curly bracket ‘{{ }}’.

Share The Post On -