Project 2: Blog Layout

Angular Engineer

Builds on these lessons

Component Task

Objective

A scaffolded Angular project is just a starting structure — the real work is composing small, focused components. A component's class can hold plain properties that the template reads via interpolation.

You're building the header of a blog.

Task: write a standalone BlogHeaderComponent (selector app-blog-header) with a title property set to 'The Dev Journal', rendered inside an <h1> via interpolation.

component.ts

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

@Component({
  selector: 'app-blog-header',
  standalone: true,
  template: `<h1>{{ title }}</h1>`
})
export class BlogHeaderComponent {
  title = 'The Dev Journal';
}

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

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →