The Future of Angular

Angular keeps evolving - like a samurai perfecting his skills throughout his entire life.

Zoneless Angular (Angular 18+)

1// app.config.ts
2import { provideExperimentalZonelessChangeDetection } from '@angular/core';
3
4export const appConfig: ApplicationConfig = {
5  providers: [
6    provideExperimentalZonelessChangeDetection()
7  ]
8};
9
10// Components must use Signals or manual markForCheck
11@Component({
12  selector: 'app-counter',
13  template: \`
14    <p>Count: {{ count() }}</p>
15    <button (click)="increment()">+1</button>
16  \`
17})
18export class CounterComponent {
19  count = signal(0);
20
21  increment(): void {
22    this.count.update(c => c + 1);
23  }
24}

Signals - Full Integration

1// Angular 19+ features
2import { signal, computed, effect, linkedSignal, resource } from '@angular/core';
3
4@Component({...})
5export class FutureComponent {
6  // linkedSignal - resets when source changes
7  userId = input.required<number>();
8  selectedTab = linkedSignal(() => 'profile');  // Resets on userId change
9
10  // resource() - declarative data fetching
11  userResource = resource({
12    request: () => this.userId(),
13    loader: async ({ request: id }) => {
14      const response = await fetch(\`/api/users/\${id}\`);
15      return response.json();
16    }
17  });
18
19  // Computed with previous value
20  changes = computed((prev) => {
21    const current = this.count();
22    return { current, previous: prev?.current ?? 0 };
23  });
24}

Partial Hydration (Experimental)

1// Selective hydration - only interactive parts
2@Component({
3  template: \`
4    <!-- Static content - no JS needed -->
5    <header>{{ title }}</header>
6
7    <!-- Hydration on interaction -->
8    @defer (hydrate on interaction) {
9      <app-interactive-widget />
10    }
11
12    <!-- Hydration when visible -->
13    @defer (hydrate on viewport) {
14      <app-comments />
15    }
16  \`
17})
18export class HybridComponent {}

Vite as Bundler

1// angular.json - Vite is the default since Angular 17
2{
3  "architect": {
4    "build": {
5      "builder": "@angular/build:application"
6    }
7  }
8}

Best Practices in Angular 19

1. Standalone Components - default, NgModules optional
2. Signals - preferred over RxJS for component state
3. Functional Guards/Resolvers - instead of classes
4. Control Flow - @if, @for, @switch instead of directives
5. inject() - instead of constructor injection
6. TypeScript Strict - full type control
7. ESLint - instead of TSLint
8. Zoneless - for maximum performance

Journey Summary

Congratulations, Angular master!

You have learned:

• TypeScript and Standalone Components
• Signals and reactivity
• RxJS and reactive programming
• Reactive forms
• Routing and Guards
• Services and Dependency Injection
• State Management
• HttpClient and API
• Testing
• Security and performance
• Styling and animations
• Advanced patterns

Ganbatte! (Good luck!)

The path of a samurai never ends - Angular keeps evolving, so keep learning!