Angular Js

Explain Angular Interpolation - Display Data in Vew

Explain Angular Interpolation - Display Data in Vew

Explain Interpolation in Angular

Interpolation is the process of presenting a component attribute in the associated view template. We can bind any type of property into view, including string, number, date, arrays, list, or map, by using interpolation.

Interpolation is used for one-way data binding in Angular.

By default, expression should be surrounded by {{ and }}. This expression is also known as template expression. {{ expression }}.
Angular evaluates an expression surrounded by {{ and }} and then converts a result to a string and assigns it to an element or directive property.

The process of combining data values with their representation on the page is called data binding. We can display our data to end-user by binding controls in the HTML template to the data properties of the component class.

value.component.ts


export class ValueComponent implements OnInit {
    value: any;
    ngOnInit() {
      this.getValues();
    }
    getValues() {
      this.value = "thetechfoyer";
    }
  }

value.component.html


{{ value}}




Evaluates an arithmetic expression, converts the result into a string.

Result in View: 2 + 2 = 4


Call Properties of Component

export class ClsInterpolation implements OnInit {

    public text: string = "Interpoloation";
    public caption: string = "Update!";
    num: number = 0;
    randomNums: number[] = [1,2, 3, 6, 7, 8];
 
    private count:number = 0;
 
    ngOnInit(): void {
    }
 
    getCurrentTime(): any {
      return Date.now();
    }
  }

View / Html

<div>
<p>{{ text }} </p>
<p>{{ num }} </p>
<p>{{ getCurrentTime() }} </p>
<button innerText={{caption}}></button>
<ul>
<li *ngFor="let rndNum of randomNums">{{rndNum}}</li>
</ul>
</div>


Note: Except for the following, most JavaScript expressions are acceptable template expressions: - Bitwise perators for assignment, increment, and decrement (=,+=, -=, |, &, ++, -,!,?, etc.) - new, typeof, instanceof, and so forth. - chaining an expression with either; or, - using several ES2015+ operators




Related Post

About Us

Community of IT Professionals

A Complete IT knowledgebase for any kind of Software Language, Development, Programming, Coding, Designing, Networking, Hardware and Digital Marketing.

Instagram