Property binding with square brackets in Angular - Mini Project: Build & Apply

Property binding with square brackets

📖 Scenario: You are building a simple Angular component to display a user's profile picture. The image source URL will be set dynamically using property binding.

🎯 Goal: Create an Angular standalone component that uses property binding with square brackets to set the src attribute of an <img> tag dynamically from a component variable.

📋 What You'll Learn

Create a standalone Angular component named UserProfileComponent.

Define a string variable profileImageUrl in the component class with the exact value 'https://example.com/user.png'.

Use property binding with square brackets to bind the src attribute of an <img> element to profileImageUrl.

Add an alt attribute with the value 'User profile picture' for accessibility.

Ensure the component is standalone and imports CommonModule.

💡 Why This Matters

🌍 Real World

Property binding is commonly used in Angular to dynamically set element properties like image sources, form inputs, and more, based on component data.

💼 Career

Understanding property binding is essential for Angular developers to build interactive and dynamic web applications that respond to data changes.

1

Create the Angular component with the image URL variable

Create a standalone Angular component named UserProfileComponent. Inside the component class, define a string variable called profileImageUrl and set it to 'https://example.com/user.png'.

Angular

// Create the UserProfileComponent with profileImageUrl variable
// Your code here

Need a hint?

Use @Component decorator with standalone: true. Define profileImageUrl inside the class.

2

Add the image element with property binding for src

In the template property of UserProfileComponent, add an <img> element. Use property binding with square brackets to bind the src attribute to the profileImageUrl variable.

Angular

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

@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [CommonModule],
  template: `
    
  `,
})
export class UserProfileComponent {
  profileImageUrl = 'https://example.com/user.png';
}

// Add the  element with property binding for src inside the template
// Your code here

Need a hint?

Use [src]="profileImageUrl" inside the <img> tag in the template string.

3

Add alt attribute for accessibility

Add an alt attribute to the <img> element in the template with the exact value 'User profile picture' to improve accessibility.

Angular

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

@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [CommonModule],
  template: `
    
  `,
})
export class UserProfileComponent {
  profileImageUrl = 'https://example.com/user.png';
}

// Add alt attribute with value 'User profile picture' to the  tag
// Your code here

Need a hint?

Inside the <img> tag, add alt="User profile picture".

4

Verify standalone component imports CommonModule

Ensure the UserProfileComponent is standalone and imports CommonModule in the imports array of the @Component decorator.

Angular

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

@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [CommonModule],
  template: `
    
  `,
})
export class UserProfileComponent {
  profileImageUrl = 'https://example.com/user.png';
}

// Confirm standalone: true and imports: [CommonModule] are present
// Your code here

Need a hint?

Check the @Component decorator has standalone: true and imports: [CommonModule].