What is Angular? A Complete Overview of the Modern Framework

Introduction

Angular is a TypeScript-based web application framework developed and maintained by Google. It provides a comprehensive solution for building scalable single-page applications (SPAs) with a component-based architecture, powerful CLI tooling, and a rich ecosystem of official libraries for routing, forms, HTTP communication, and testing.

Core Concepts

1. Component-Based Architecture

Everything in Angular revolves around components — self-contained, reusable building blocks that control a portion of the UI.

@Component({
  selector: "app-user-profile",
  template: `
    <div class="user-profile">
      <h2>{{ user.name }}</h2>
      <p>{{ user.email }}</p>
      <button (click)="updateProfile()">Update Profile</button>
    </div>
  `,
})
export class UserProfileComponent {
  user = {
    name: "John Doe",
    email: "john@example.com",
  };

  updateProfile() {
    // Update logic here
  }
}

2. TypeScript-First

Angular is built with TypeScript, offering strong typing, interfaces, decorators, and excellent IDE support out of the box.

interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "user";
}

@Injectable({ providedIn: "root" })
export class UserService {
  private http = inject(HttpClient);

  getUser(id: number): Observable<User> {
    return this.http.get<User>(`/api/users/${id}`);
  }
}

3. Signals (Angular 16+)

Signals are Angular’s modern reactive primitive for fine-grained reactivity and improved change detection performance.

@Component({
  selector: "app-counter",
  template: `
    <p>Count: {{ count() }}</p>
    <p>Double: {{ doubleCount() }}</p>
    <button (click)="increment()">Increment</button>
  `,
})
export class CounterComponent {
  count = signal(0);
  doubleCount = computed(() => this.count() * 2);

  increment() {
    this.count.update((value) => value + 1);
  }
}

4. Standalone Components (Default since Angular 17)

Standalone components eliminate the need for NgModules, simplifying the application architecture and improving tree-shaking.

@Component({
  standalone: true,
  selector: "app-profile-editor",
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="profileForm">
      <input formControlName="username" />
      <button (click)="save()">Save</button>
    </form>
  `,
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    username: new FormControl(""),
  });

  save() {
    // Save logic
  }
}

5. Dependency Injection

Angular’s hierarchical dependency injection system allows services to be shared across components with flexible scoping.

@Injectable({ providedIn: "root" })
export class LoggerService {
  log(message: string) {
    console.log(`[${new Date().toISOString()}]: ${message}`);
  }
}

// Using inject() function (modern approach)
@Component({
  selector: "app-example",
  template: `<p>Check console for logs</p>`,
})
export class ExampleComponent {
  private logger = inject(LoggerService);

  constructor() {
    this.logger.log("Component initialized");
  }
}

6. Control Flow Syntax (Angular 17+)

Angular’s built-in control flow replaces structural directives with a cleaner, more performant template syntax.

@if (user) {
<h2>Welcome, {{ user.name }}!</h2>
} @else {
<p>Please log in.</p>
} @for (item of items; track item.id) {
<app-item-card [item]="item" />
} @empty {
<p>No items found.</p>
} @switch (status) { @case ('loading') { <app-spinner /> } @case ('error') {
<p>Something went wrong.</p>
} @default { <app-content /> } }

7. Deferrable Views (Angular 17+)

Lazy-load parts of a template declaratively to improve initial load performance.

@defer (on viewport) {
<app-heavy-chart [data]="chartData" />
} @loading (minimum 200ms) {
<app-skeleton />
} @placeholder {
<p>Chart will load when scrolled into view</p>
}

8. Application Bootstrap

Modern Angular apps bootstrap using bootstrapApplication with provider functions — no AppModule required.

import { bootstrapApplication } from "@angular/platform-browser";
import { provideRouter } from "@angular/router";
import { provideHttpClient, withInterceptors } from "@angular/common/http";
import { AppComponent } from "./app/app.component";
import { routes } from "./app/routes";
import { authInterceptor } from "./app/interceptors/auth";

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(withInterceptors([authInterceptor])),
  ],
});

Key Features at a Glance

Angular CLI

The Angular CLI is a powerful command-line tool that streamlines development workflows.

# Create a new project
ng new my-app

# Generate components, services, pipes, etc.
ng generate component user-profile
ng generate service auth
ng generate pipe format-date

# Development server with hot reload
ng serve

# Production build with optimizations
ng build --configuration production

# Run unit tests
ng test

Performance Optimizations

Angular provides several mechanisms for building high-performance applications:

1. Signals and Zoneless Change Detection — Fine-grained reactivity without Zone.js overhead
2. Deferrable Views — Lazy-load template sections based on triggers (viewport, interaction, timer)
3. Route-Level Code Splitting — Automatic lazy loading of feature routes
4. Tree-Shaking — Unused code is eliminated during the build
5. Server-Side Rendering (SSR) — Full SSR with incremental hydration support
6. Image Optimization — NgOptimizedImage directive for automatic image best practices

Interview Tips

When answering “What is Angular?” in an interview:

1. Define it clearly: Angular is a TypeScript-based framework by Google for building scalable SPAs with a component-based architecture.

2. Highlight modern features: Focus on signals, standalone components, built-in control flow, and deferrable views — these reflect current Angular development.

3. Mention the ecosystem: CLI tooling, official libraries for routing/forms/HTTP, and built-in SSR support distinguish Angular from lighter libraries.

4. Discuss performance: Talk about signals replacing Zone.js, tree-shaking, code splitting, and deferrable views for optimized loading.

5. Know the developer experience: Mention the ng CLI, strong typing with TypeScript, and excellent IDE support as productivity advantages.