Project 4: Photo Gallery

Angular Engineer

Builds on these lessons

Component Task

Objective

Property binding isn't limited to standard DOM attributes — [class.name] toggles a single CSS class based on a boolean expression, which is how a template reacts to component state.

You're building a photo gallery tile.

Task: write a GalleryComponent (selector app-gallery) that binds an image's src, shows a caption below it, and toggles a selected class based on an isSelected boolean.

component.ts

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

@Component({
  selector: 'app-gallery',
  standalone: true,
  template: `
    <img [src]="photoUrl" [class.selected]="isSelected">
    <p>{{ caption }}</p>
  `
})
export class GalleryComponent {
  photoUrl = 'sunset.jpg';
  caption = 'Golden hour';
  isSelected = true;
}

* Hint: Correct characters turn green, incorrect ones turn red.

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →