How Angular differs from React and Vue

Introduction

Angular, React, and Vue are popular tools to build websites and apps. They help organize code and make interactive pages. Each one works a bit differently to fit different needs.

When you want a full, ready-made system with many built-in features (Angular).

When you prefer a flexible library to build UI pieces your way (React).

When you want a simple and easy-to-learn framework with gentle learning curve (Vue).

When you need strong typing and structure for large projects (Angular).

When you want to quickly add interactive parts to an existing page (React or Vue).

Syntax

Angular

Angular uses components with HTML templates, TypeScript code, and decorators like @Component.
React uses JavaScript functions or classes returning JSX (HTML-like syntax).
Vue uses single-file components with <template>, <script>, and <style> sections.

Angular uses TypeScript by default, which adds types to JavaScript.

React focuses on UI only, so you add other tools for routing or state management.

Examples

This shows Angular's component with a decorator and template inside the code.

Angular

Angular component example:

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

@Component({
  selector: 'app-hello',
  template: `<h1>Hello, {{name}}!</h1>`
})
export class HelloComponent {
  name = 'Angular';
}

React uses a function returning JSX, which looks like HTML inside JavaScript.

Angular

React component example:

function Hello() {
  const name = 'React';
  return <h1>Hello, {name}!</h1>;
}

Vue separates template and script in one file, making it easy to read.

Angular

Vue component example:

<template>
  <h1>Hello, {{ name }}!</h1>
</template>

<script setup>
const name = 'Vue';
</script>

Sample Program

This Angular component shows a simple counter using signals and standalone component features from Angular 17+. It updates the number when buttons are clicked.

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <button (click)="count.update(c => c - 1)">-</button>
    <span>{{ count() }}</span>
    <button (click)="count.update(c => c + 1)">+</button>
  `
})
export class CounterComponent {
  count = signal(0);
}

Important Notes

Angular is a full framework with many features built-in, like routing and forms.

React is a library focused on UI, so you add other tools as needed.

Vue is easy to start with and flexible, good for small to medium projects.

Summary

Angular is a full, structured framework using TypeScript and decorators.

React is a flexible UI library using JSX and JavaScript functions.

Vue is a progressive framework with simple syntax and single-file components.