Getting Started with Angular 18 (2025): A Complete Beginner’s Guide to Directives, Two-Way Data Binding, and How It Compares with React and Vue

Introduction

If you’re stepping into modern front-end development in 2025, you’ve probably heard of Angular, React, and Vue — the three giants powering the web today. Angular, built and maintained by Google, remains a top choice for scalable enterprise applications and robust single-page apps (SPAs).

This tutorial is your step-by-step beginner’s guide to getting started with the latest version — Angular 18 (as of 2025). We’ll cover how to set up your first project, create custom directives, understand two-way data binding, and compare Angular with ReactJS and VueJS.

---

🧭 What Is Angular?

Angular is a TypeScript-based front-end framework designed for building dynamic, modular, and reactive web applications. Unlike React (a library) or Vue (a progressive framework), Angular provides a complete solution — including routing, forms, HTTP communication, and dependency injection — right out of the box.

Some standout Angular features include:

• 🧩 Modular architecture using components and modules

• 🔁 Two-way data binding

• ⚡ Dependency Injection

• 📦 Built-in tools for routing and HTTP

• 🧠 Strong TypeScript and Reactive Programming support

---

⚙️ Setting Up Angular 18

1. Install Node.js and Angular CLI

Before anything else, make sure you have Node.js (v18 or later) installed.
You can check your version by running:

node -v
npm -v

Then, install the Angular CLI globally:

npm install -g @angular/cli

Verify the installation:

ng version

---

2. Create a New Angular Project

Now, create a new project:

ng new my-angular-app

During setup, you’ll be asked a few questions (like adding routing and choosing CSS/SCSS). Once done, navigate to your new folder:

cd my-angular-app

Start the development server:

ng serve

Then visit http://localhost:4200 in your browser — you should see the default Angular welcome page 🎉

---

🧱 Understanding Angular Directives

Directives are one of Angular’s most powerful features. They let you extend HTML’s capabilities by adding new behaviors to elements in the DOM.

Angular comes with three types of directives:

1. Component Directives — These are directives with templates (basically components).

2. Structural Directives — Modify the DOM structure (like *ngIf, *ngFor).

3. Attribute Directives — Change the appearance or behavior of an existing element (like ngStyle, ngClass).

---

Creating a Custom Directive (Step-by-Step)

Let’s build a simple custom directive that highlights text when the user hovers over it.

1. Generate the directive using Angular CLI:

   ng generate directive highlight
   

2. Open highlight.directive.ts. It should look like this:

   import { Directive, ElementRef, HostListener, Input } from '@angular/core';
   
   @Directive({
     selector: '[appHighlight]'
   })
   export class HighlightDirective {
   
     @Input() appHighlight = '';
   
     constructor(private el: ElementRef) {}
   
     @HostListener('mouseenter') onMouseEnter() {
       this.highlight(this.appHighlight || 'yellow');
     }
   
     @HostListener('mouseleave') onMouseLeave() {
       this.highlight('');
     }
   
     private highlight(color: string) {
       this.el.nativeElement.style.backgroundColor = color;
     }
   }
   

3. Use it in a component template:

   <p appHighlight="lightblue">Hover over me to see the highlight effect!</p>
   

You’ve just created your first custom directive — one of the building blocks of Angular development!

---

🔁 Two-Way Data Binding in Angular

Angular’s two-way data binding keeps your component class and template in sync automatically. When a user updates input fields, the component’s data updates instantly — and vice versa.

You use Angular’s special syntax called [(ngModel)] (known as the banana-in-a-box syntax 🍌📦).

Example:

In your component file (app.component.ts):

export class AppComponent {
  username: string = 'Bhuman';
}

In your template (app.component.html):

<input [(ngModel)]="username" placeholder="Enter your name">
<p>Hello, {{ username }}!</p>

Note: For ngModel to work, you need to import FormsModule in your app.module.ts:

import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [BrowserModule, FormsModule],
  ...
})
export class AppModule {}

Now, as you type in the input field, the text in the paragraph updates in real-time — that’s two-way binding in action!

---

⚖️ Angular vs React vs Vue (2025 Comparison)

Feature	Angular 18	React 19	Vue 4
Type	Full-fledged Framework	UI Library	Progressive Framework
Language	TypeScript	JavaScript / TypeScript	JavaScript / TypeScript
Learning Curve	Steep (more concepts)	Moderate	Easy
Data Binding	Two-way binding	One-way (with manual handlers)	Two-way (v-model)
DOM Handling	Real DOM	Virtual DOM	Virtual DOM
State Management	Built-in via services	Redux / Context API	Vuex / Pinia
Performance	Excellent for large-scale apps	Very fast for UI-heavy apps	Fast and lightweight
Use Case	Enterprise apps	Dynamic UIs	Small to mid-scale apps

✅ In short:

• Use Angular if you want a full solution with strong TypeScript integration.

• Use React for flexible, component-based UI development.

• Use Vue if you want simplicity with good scalability.

---

🧠 Final Thoughts

Angular remains one of the most complete and enterprise-ready frameworks in 2025. Its directives, dependency injection, and two-way data binding make it a developer favorite for building large, maintainable apps.

If you’re just starting out:

• Learn components, directives, and data binding.

• Practice using the Angular CLI.

• Gradually explore services, routing, and RxJS for reactive programming.

---

Recommended Next Steps

• 🔗 Official Angular Docs

• 📘 TypeScript Handbook

• 🧠 Try building a To-Do App using Angular’s data binding and directives