Project 5: Team Members Grid

Angular Engineer

Builds on these lessons

Component Task

Objective

Event binding — (event)="handler()" — wires a DOM event to a class method, letting user interaction update component state.

You're building a team directory.

Task: write a TeamGridComponent (selector app-team-grid) with a button that calls selectMember('Dana Cole') on click, and a paragraph showing the currently selectedMember.

component.ts

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

@Component({
  selector: 'app-team-grid',
  standalone: true,
  template: `
    <button (click)="selectMember('Dana Cole')">Select</button>
    <p>Selected: {{ selectedMember }}</p>
  `
})
export class TeamGridComponent {
  selectedMember = '';
  selectMember(name: string) {
    this.selectedMember = name;
  }
}

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

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →