Understanding String Interpolation in Angular

Understanding String Interpolation in Angular

Interpolation:

• You use interpolation to weave calculated strings into the text between HTML element tags and within attribute assignments.
• The text between the braces is often the name of a component property
• Angular replaces that name with the string value of the corresponding component property

Note: Create/Open an angular Project in VSCode

Syntax:

{{   variableName/functionWithReturnTypeString/expression  }}

Scenario 1(Displaying Text):variableName

app.component.ts

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'app';

loginName = 'NextGenDot-Net';

}

app.component.html

<h3>

You're logged in as {{loginName}}

</h3>

What happened:

• If you see the output in browser , It would be "You're logged in as NextGenDot-Net".
• If angular detects "{{" in any of the html , It goes for string interpolation.
• So in this example, We have used loginName inside double-curly braces, Hence angular replaces string value from typescript file to html.

Scenario 2(Displaying Text):function

app.component.ts:

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'app';

loginName = 'NextGenDot-Net';

getBloggerName()

{

return "Selvaraj";

}

}

app.component.html

<h3>

Blogger name is {{getBloggerName()}}

</h3>

What happened:

• Outcome would be , "Blogger name is Selvaraj"
• Here inside double-curly , Angular detects function name(getBloggerName) and it returns string back. Hence angular displays Selvaraj.

Questions to ask yourself:

1)What will happen, If you forgot to put () on function name?

   Simple.It displays the entire function content.

2)What will happen , If function returns Number back?

    Number will be displayed as a string value in html.

3)What will happen , If function returns Object back?

    Object will not be treated as a string values. Hence It displays "[object Object]" as outcome.

4)What will happen, If you call a function which is not present?

    Angular will not throw any errors. It simply ignores.

5)What will happen , If you write function inside double-curly braces?

    Angular will throw error and page will not be rendered.

Scenario 3(Evaluating Expression):

app.component.ts:

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'app';

loginName = 'NextGenDot-Net';

getBloggerName(){

return {name:'Selva'};

}

getVal(){

return 9;

}

}

app.component.html

<p>The sum of 9 + 9 is not {{9 + 9 + getVal()}}</p>

What happened:

• Output would be "The sum of 9 + 9 is not 27"
• Here angular detects expression inside the double-curly braces.
• Evaluation outcome is 27 and same will be displayed over here.

Questions to ask yourself:

1)What will happen , If you function inside the expression returns string back?

    It work similar to javascript. Hence Instead adding the number , It will go for      string concat

Stay tuned. Happy Learning!!