Interpolation with double curly braces in Angular - Mini Project: Build & Apply

Interpolation with double curly braces

📖 Scenario: You are building a simple Angular component to display a user's profile information on a webpage. This is like filling out a name tag where you want the name and age to appear clearly.

🎯 Goal: Create an Angular standalone component that uses interpolation with double curly braces to show a user's name and age inside the HTML template.

📋 What You'll Learn

Create a standalone Angular component named UserProfileComponent.

Define two properties in the component class: name with value 'Alice' and age with value 30.

Use interpolation with double curly braces {{ }} in the template to display the name and age.

Ensure the component is standalone and imports CommonModule.

💡 Why This Matters

🌍 Real World

Displaying user information dynamically on web pages is common in many apps like social media profiles, dashboards, and contact lists.

💼 Career

Understanding interpolation in Angular is essential for frontend developers to bind data to the UI and create interactive web applications.

1

Create the component class with user data

Create a standalone Angular component named UserProfileComponent. Inside the class, define two properties: name set to 'Alice' and age set to 30.

Angular

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

@Component({
  standalone: true,
  selector: 'app-user-profile',
  template: ``,
  imports: []
})
export class UserProfileComponent {
  // Your code here
}

Need a hint?

Remember to add name and age as simple properties inside the class.

2

Add CommonModule to imports

Add CommonModule to the imports array in the @Component decorator to enable common Angular directives.

Angular

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

@Component({
  standalone: true,
  selector: 'app-user-profile',
  template: ``,
  imports: [
    // Your code here
  ]
})
export class UserProfileComponent {
  name = 'Alice';
  age = 30;
}

Need a hint?

Import CommonModule from @angular/common and add it inside the imports array.

3

Use interpolation to display name and age

Inside the template string of the @Component decorator, use interpolation with double curly braces to display the name and age properties in a paragraph. For example, write: <p>Name: {{ name }}</p> and <p>Age: {{ age }}</p>.

Angular

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

@Component({
  standalone: true,
  selector: 'app-user-profile',
  template: `
    
  `,
  imports: [CommonModule]
})
export class UserProfileComponent {
  name = 'Alice';
  age = 30;
}

Need a hint?

Use double curly braces {{ }} inside the template to show the values of name and age.

4

Complete the component with selector and standalone flag

Ensure the @Component decorator includes the selector set to 'app-user-profile' and the standalone flag set to true. This completes the component setup.

Angular

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

@Component({
  // Verify selector and standalone flag here
})
export class UserProfileComponent {
  name = 'Alice';
  age = 30;
}

Need a hint?

Check that standalone: true and selector: 'app-user-profile' are present in the @Component decorator.