How to use Interpolation in Angular

Angular interpolation is used for dynamically rendering variable value on DOM, it’s embeds expressions within the HTML content of your templates.

Interpolation in Angular is used by double curly braces like – {{ }}. Inside these curly braces, you can place your variable or property that will be invoked and replaced with their corresponding values when the template is rendered on Browser.

Here I have mentioned some basic examples of Angular interpolation

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'myapp';
}

TypeScript – app.component.ts

In the above example, you can see that we interpolate a variable title, {{ title }} which is an interpolation expression that dynamically renders the value of the title property into the template. When the component is rendered on the browser.

<p>{{title}}</p>

HTML – app.component.html

Other Example – We can also conditionally render the text

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
    
  userLoggedIn = true;
}

app.component.ts – TypeScript

You can also use ternary operators for conditional display the text dynamically

<p>{{userLoggedIn ? 'Login Successful': 'Not LoggedIn'}}</p>

app.component.html – HTML

it’s depending on the value of the userLoggedIn property, the HTML template will render either “Login Successful” or “Not LoggedIn”.

Explore More Visit Angular Official Website – https://angular.io/guide/interpolation

Remember

While interpolation is great for simple expressions and values, for more complex logic and dynamic behavior, you might want to explore other Angular features like property binding and event binding.

Explained Angular Folder Structure | Angular Tutorial – 2