Project 25: Chat App Interface

Angular Engineer

Builds on these lessons

Component Task

Objective

Standalone components import exactly what they use — including other components — directly in their own imports array, replacing the older pattern of declaring everything inside an NgModule.

You're building a chat window.

Task: write a ChatMessageComponent with an @Input() text, and a ChatWindowComponent that imports it directly and renders one message.

component.ts

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

@Component({
  selector: 'app-chat-message',
  standalone: true,
  template: `<p class="message">{{ text }}</p>`
})
export class ChatMessageComponent {
  @Input() text = '';
}

@Component({
  selector: 'app-chat-window',
  standalone: true,
  imports: [ChatMessageComponent],
  template: `<app-chat-message [text]="'Hey, are you there?'"></app-chat-message>`
})
export class ChatWindowComponent {}

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

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →