Advanced Angular Concepts

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

@Component({
  standalone: true,
  selector: 'app-counter',
  template: `
    <h2>Count: {{ count() }}</h2>
    <h3>Double: {{ double() }}</h3>
    <button (click)="increment()">+1</button>
  `
})
export class CounterComponent {
  // signal() — wraps a reactive value
  count = signal<number>(0);

  // computed() — automatically updates when 'count' changes
  double = computed(() => this.count() * 2);

  constructor() {
    // effect() — runs side effects when signals change
    effect(() => {
      console.log(&#039;Count changed to:&#039;, this.count());
    });
  }

  increment(): void {
    this.count.update(c => c + 1); // update() applies a function
    // OR: this.count.set(this.count() + 1); // set() sets directly
  }
}

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

@Injectable({ providedIn: 'root' })
export class ProductSignalService {
  private _products = signal<any[]>([]);
  private _loading = signal<boolean>(false);

  // Public read-only access
  readonly products = this._products.asReadonly();
  readonly loading = this._loading.asReadonly();

  constructor(private http: HttpClient) {}

  loadProducts(): void {
    this._loading.set(true);
    this.http.get<any[]>(&#039;/api/products&#039;).subscribe({
      next: p => { this._products.set(p); this._loading.set(false); },
      error: () => this._loading.set(false)
    });
  }
}

@if (productService.loading()) {
  <p>Loading...</p>
} @else {
  @for (p of productService.products(); track p.id) {
    <div>{{ p.name }}</div>
  }
}

// Modern Angular app with no NgModules at all
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig);

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withPreloading(PreloadAllModules)),
    provideHttpClient(withInterceptors([authInterceptor])),
    provideAnimations()
  ]
};

@Component({
  standalone: true,
  selector: 'app-feature',
  imports: [CommonModule, RouterModule, SharedButtonComponent], // Direct imports!
  template: `...`
})
export class FeatureComponent {}

import { Component, ViewContainerRef, ComponentRef } from '@angular/core';
import { AlertComponent } from './alert.component';

@Component({ selector: &#039;app-root&#039;, template: &#039;<button (click)="showAlert()">Alert</button><ng-container #container></ng-container>&#039; })
export class AppComponent {
  private alertRef?: ComponentRef<AlertComponent>;

  constructor(private vcr: ViewContainerRef) {}

  showAlert(): void {
    this.vcr.clear();
    this.alertRef = this.vcr.createComponent(AlertComponent);
    this.alertRef.instance.message = &#039;Dynamic alert created!&#039;;
    this.alertRef.instance.closed.subscribe(() => {
      this.alertRef?.destroy();
    });
  }
}

// Dashboard that needs both user AND products simultaneously
combineLatest([
  this.userService.currentUser$,
  this.productService.products$
]).subscribe(([user, products]) => {
  this.dashboardData = { user, products };
});

this.saveButton$.pipe(
  withLatestFrom(this.form.valueChanges),
  switchMap(([_, formData]) => this.api.save(formData))
).subscribe();

// Reusable operator for retry with delay
export function retryWithDelay(maxRetries = 3, delay = 1000) {
  return <T>(source: Observable<T>): Observable<T> =>
    source.pipe(
      retryWhen(errors =>
        errors.pipe(
          take(maxRetries),
          delayWhen(() => timer(delay))
        )
      )
    );
}

// Usage
this.http.get(&#039;/api/data&#039;).pipe(retryWithDelay(3, 2000)).subscribe();