Thuta Learning
Search
ExercisesWeb Developmentintermediate

Exercise Set 1: Components, Binding & Directives

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

  • Practice Exercise Set 1: Components, Binding & Directives yourself
  • Reinforce the skills you've already learned through practice
  • Get comfortable finding bugs, fixing them, and checking your own work

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.

Code Example

typescript
// 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++;
  }
}
You should see
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.

5-Minute Try-It

Within 5 minutes, extend task (4) with *ngSwitch to show different text for three cases based on array length: 0, 1, and more than 1.

A Quick Word of Caution

You can't put two structural directives (*ngIf, *ngFor) on the same element at once — use ng-container or a wrapper element instead.

Easy traps

  • Getting an error from using [(ngModel)] without importing FormsModule into app.module.ts
  • Not realizing that skipping the trackBy function inside a *ngFor loop can hurt performance when the list has a lot of items

Now Try It Yourself

Within 5 minutes, extend task (4) with *ngSwitch to show different text for three cases based on array length: 0, 1, and more than 1.

You'll know it worked when: 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.

Exercise Set 1: Components, Binding & Directives | Thuta Learning