How Angular differs from React and Vue - Try It Yourself

How Angular Differs from React and Vue

📖 Scenario: You are building a simple web page to show a list of favorite fruits. You want to understand how Angular's approach differs from React and Vue by creating a basic Angular component that displays this list.

🎯 Goal: Create an Angular standalone component that displays a list of fruits using Angular's template syntax and signals. This will help you see how Angular handles data and rendering differently from React and Vue.

📋 What You'll Learn

Create a standalone Angular component named FruitListComponent

Use Angular's signal to hold the list of fruits

Display the list of fruits in the template using Angular's @for control flow

Add a button to add a new fruit to the list using Angular's reactive signals

💡 Why This Matters

🌍 Real World

Building interactive web pages with dynamic data display and user input using Angular's modern reactive features.

💼 Career

Understanding Angular's unique reactive signals and template syntax is essential for frontend developer roles using Angular frameworks.

1

DATA SETUP: Create the initial fruit list signal

Create a standalone Angular component named FruitListComponent. Inside it, create a signal called fruits initialized with the array ["Apple", "Banana", "Cherry"].

Angular

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

@Component({
  selector: 'app-fruit-list',
  standalone: true,
  template: ``,
})
export class FruitListComponent {
  // Create a signal called fruits with initial array
  // Your code here
}

Need a hint?

Use signal from Angular to create reactive state holding the fruit array.

2

CONFIGURATION: Add a new fruit variable

Inside FruitListComponent, create a variable called newFruit initialized to an empty string "". This will hold the name of the fruit to add.

Angular

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

@Component({
  selector: 'app-fruit-list',
  standalone: true,
  template: ``,
})
export class FruitListComponent {
  fruits = signal(["Apple", "Banana", "Cherry"]);
  // Create a variable newFruit initialized to empty string
  // Your code here
}

Need a hint?

This variable will hold the input value for the new fruit name.

3

CORE LOGIC: Display the fruit list and add a method to add fruits

In the component class, add a method called addFruit() that adds the current newFruit value to the fruits signal array and then clears newFruit. In the template, use Angular's @for directive to display each fruit inside a <li> element within a <ul>.

Angular

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

@Component({
  selector: 'app-fruit-list',
  standalone: true,
  template: `
    
       -->
    
  `,
})
export class FruitListComponent {
  fruits = signal(["Apple", "Banana", "Cherry"]);
  newFruit = "";

  // Add addFruit() method to add newFruit to fruits and clear newFruit
  // Your code here
}

Need a hint?

Use this.fruits.update() to add the new fruit immutably. Use *ngFor in the template to loop over the fruits.

4

COMPLETION: Add input and button to the template for adding fruits

In the component template, add an <input> element bound to newFruit using Angular's two-way binding [(ngModel)]. Add a <button> that calls addFruit() when clicked. Make sure to import FormsModule in the component's imports array.

Angular

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

@Component({
  selector: 'app-fruit-list',
  standalone: true,
  imports: [FormsModule],
  template: `
    
      {{ fruit }}
    
    
  `,
})
export class FruitListComponent {
  fruits = signal(["Apple", "Banana", "Cherry"]);
  newFruit = "";

  addFruit() {
    if (this.newFruit.trim()) {
      this.fruits.update(list => [...list, this.newFruit.trim()]);
      this.newFruit = "";
    }
  }
}

Need a hint?

Remember to import FormsModule for two-way binding with ngModel. Use (click) event binding on the button.