Project 15: Contact Us Form

Angular Engineer

Builds on these lessons

Component Task

Objective

FormsModule unlocks [(ngModel)] — two-way binding that keeps an input and a class property perfectly in sync in both directions.

You're building a contact form's first field.

Task: write a ContactComponent that imports FormsModule, two-way binds an email property to an input, and echoes it back below.

component.ts

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

@Component({
  selector: 'app-contact',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="email" placeholder="Your email">
    <p>You typed: {{ email }}</p>
  `
})
export class ContactComponent {
  email = '';
}

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

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →