DEV Community

Alex Spinov
Alex Spinov

Posted on

Angular 18 Has a Free Framework: Signals, Zoneless Change Detection, and Standalone Components by Default

#webdev #javascript #angular #typescript

Angular had a reputation: too complex, too much boilerplate, too many concepts before "Hello World." NgModules, decorators, dependency injection, zone.js, RxJS — the learning cliff was real.

Angular 18 changes all of that. Standalone components by default. Signals for reactivity. Optional zone.js. The framework finally feels modern.

What Changed in Angular 17-18

  • Standalone components by default — no more NgModules for simple apps
  • Signals — fine-grained reactivity without RxJS for simple state
  • Control flow — @if, @for, @switch replace *ngIf, *ngFor
  • Deferrable views — @defer for lazy-loading sections of a page
  • Zoneless change detection — opt out of zone.js entirely
  • SSR improvements — hydration, streaming, partial hydration
  • Vite + esbuild — faster builds replacing webpack

Quick Start 

npx @angular/cli@latest new my-app
cd my-app && ng serve
Enter fullscreen mode Exit fullscreen mode

Standalone Components — No NgModules 

// Before Angular 17: needed NgModule for EVERYTHING
@NgModule({
  declarations: [AppComponent, HeaderComponent, UserListComponent],
  imports: [BrowserModule, HttpClientModule, RouterModule.forRoot(routes)],
  bootstrap: [AppComponent],
})
export class AppModule {}

// Angular 18: just components
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HeaderComponent, RouterOutlet],
  template: `
    <app-header />
    <router-outlet />
  `,
})
export class AppComponent {}
Enter fullscreen mode Exit fullscreen mode

Signals — Simple Reactivity 

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>Count: {{ count() }}</p>
    <p>Doubled: {{ doubled() }}</p>
    <button (click)="increment()">+1</button>
  `,
})
export class CounterComponent {
  count = signal(0);
  doubled = computed(() => this.count() * 2);

  constructor() {
    effect(() => {
      console.log(`Count is now: ${this.count()}`);
    });
  }

  increment() {
    this.count.update(c => c + 1);
  }
}
Enter fullscreen mode Exit fullscreen mode

No more ChangeDetectorRef. No more async pipe for simple values. Signals handle reactivity at the component level.

New Control Flow — Readable Templates 

<!-- Old (still works, but deprecated) -->
<div *ngIf="user; else loading">{{ user.name }}</div>
<ng-template #loading>Loading...</ng-template>
<ul>
  <li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>
</ul>

<!-- New — cleaner, more powerful -->
@if (user()) {
  <div>{{ user().name }}</div>
} @else {
  <div>Loading...</div>
}

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <li>No items found</li>
}

@switch (status()) {
  @case ('loading') { <spinner /> }
  @case ('error') { <error-message /> }
  @case ('success') { <data-view /> }
}
Enter fullscreen mode Exit fullscreen mode

Deferrable Views — Lazy Loading Made Easy 

<!-- Load this section only when visible in viewport -->
@defer (on viewport) {
  <heavy-chart-component />
} @placeholder {
  <div class="skeleton">Chart loading...</div>
} @loading (minimum 500ms) {
  <spinner />
} @error {
  <p>Failed to load chart</p>
}
Enter fullscreen mode Exit fullscreen mode

One directive replaces loadChildren, IntersectionObserver, loading states, and error handling.

When to Choose Angular 18

Choose Angular when:

  • Enterprise teams — Angular's opinionated structure scales well
  • Full-stack TypeScript — Angular CLI scaffolds everything
  • Form-heavy apps — reactive forms are best-in-class
  • Large teams — strong conventions reduce bike-shedding

Skip Angular when:

  • Small projects — Angular's structure adds overhead for simple apps
  • You prefer flexibility over convention
  • You want the smallest possible bundle (Svelte, Solid are lighter)

The Bottom Line

Angular 18 is not your 2016 Angular. Signals, standalone components, and new control flow make it feel like a completely different framework — one that's finally competitive with React and Vue on developer experience.

Start here: angular.dev

Need custom data extraction, scraping, or automation? I build tools that collect and process data at scale — 78 actors on Apify Store and 265+ open-source repos. Email me: Spinov001@gmail.com | My Apify Actors

Top comments (0)