Exercise Set 1: Components, Binding & Directives

Let's think about this for a moment

This exercise set is designed to give you hands-on practice with Angular's most fundamental building blocks — components, data binding (property/event/two-way), and structural directives (*ngIf, *ngFor, *ngSwitch). Each task can be done standalone, and they're great for refreshing the concepts you learned in the Basic chapter. We recommend attempting each solution yourself before checking the answer as a reference.

Exercises

(1) Build a `ProfileCardComponent` and display @Input() name, age via property binding. (2) Use event binding [(click)] so a button click increments a counter number. (3) Two-way bind a text input field with [(ngModel)] and show a real-time preview of the typed text. (4) List an array of 5 strings with *ngFor, and use *ngIf to show a "No items" message when the array is empty.

• Can display component data using @Input() property binding
• Can use both event binding and two-way binding ([(ngModel)])
• Can use *ngFor and *ngIf structural directives with correct syntax

Code Example

// profile-card.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-profile-card',
  template: `
    <div class="card">
      <h3>{{ name }}</h3>
      <p>Age: {{ age }}</p>
    </div>
  `
})
export class ProfileCardComponent {
  @Input() name = '';
  @Input() age = 0;
}

// counter.component.ts (task 2 skeleton)
import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count }}</p>
    <button (click)="increment()">+1</button>
  `
})
export class CounterComponent {
  count = 0;
  increment() {
    this.count++;
  }
}

Once all 4 tasks are done, the profile card is displayed, the number goes up every time you click the counter button, the preview text updates instantly as you type into the input field, and the list/empty message displays correctly.