Project 3: Recipe Page
Angular Engineer
Builds on these lessons
Component Task
Objective
Templates mix static HTML with two Angular features: {{ }} interpolation for text, and [property] binding for setting a DOM property from a class value.
You're building a recipe card.
Task: write a RecipeComponent (selector app-recipe) with recipeName and imageUrl properties, rendering an <h2> with the name and an <img> whose src and alt are bound to those properties.
component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-recipe',
standalone: true,
template: `
<h2>{{ recipeName }}</h2>
<img [src]="imageUrl" [alt]="recipeName">
`
})
export class RecipeComponent {
recipeName = 'Tomato Basil Pasta';
imageUrl = 'pasta.jpg';
}
* Hint: Correct characters turn green, incorrect ones turn red.
Compiler Output
🅰️
Compile your component to see the result