String Interpolation {{}} in Angular 4/5/6 – Must to know Things

String Interpolation {{}} in Angular 4 – Must to know Things:

String interpolation is basically used to output the values from the typescript file to template file. Whenever you want to dynamically display the values through backends/http requests/from DB then you can make use of this string interpolation to directly output your contents to templates.

But know the things mentioned below to understand and use it at the appropriate places.

 

1. String interpolation is defined in angular with {{}} [Double curly braces].
   2. Any type of variable can be used inside the {{}}. It is not limited to use only string as the name is string interpolation. [;)].
   3. Not allowed to write if/for/block of statements inside {{}} [ String interpolation].
   4. Methods can also be called inside the {{}} [ String interpolation ].

 

 

Code Examples:

[html]

export class MyComponent {
studentID = 100;
studentName = ‘Rithvik’;
}

[/html]

 

By default typescript understands the number and string, but if you like to explicitly mention then the same can be rewritten this way:

[html]

export class MyComponent {
studentID:number = 100;
studentName: string = ‘Rithvik’;
studentPerc: string = ‘98%’;

getStudentPerc(){
return this.studentPerc;
}
}

[/html]
here string is full small letter, java developers may write String instead of string.

in html file:

[html]

Student ID: {{studentID}} | Student Name : {{studentName}} | Student Perc : {{getStudentPerc()}}

[/html]

 

Output:

[plain]
Student ID: 100 | Student Name : Rithvik | Student Perc : 98%

[/plain]