Modern Angular: Replacing Lifecycle Hooks with Signals

As an Angular developer, you’ve likely used lifecycle hooks such as ngOnChanges, ngOnInit, and ngOnDestroy. With the advent of Zoneless and Signals, we can use better, more readable options.

Alain Chautard

May 19, 2026

Let’s check them out:

Replacing `ngOnChanges` with computed()

Previously, ngOnChanges was required to react to @Input changes and update derived state. With Signal inputs, computed handles this automatically, lazily, and without side effects.

Here is an example with before/after code.

Before — ngOnChanges:

      @Component({...})
export class PricingComponent implements OnChanges {
  @Input() price = 0;
  totalPrice = 0;

  constructor(private taxService: TaxService) {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes['price']) {
      // Calling the service when the input updates
      this.totalPrice = this.taxService.calculateTotal(this.price); 
    }
  }
}

After — computed:

      @Component({...})
export class PricingComponent {
  price = input<number>(0);
  private taxService = inject(TaxService);
  
  // Calling the service when the input updates
  totalPrice = computed(() => this.taxService.calculateTotal(this.price())); 
}

Using Signals is not only more performant, but it's also more concise and readable.

Rethinking ngOnInit

ngOnInit was often used as a safe place to initialize data once inputs were available. With Signals and modern reactivity, initialization can often happen declaratively at the property level.

Before — ngOnInit:

      @Component({...})
export class UserComponent implements OnInit {
  @Input() userId!: string;
  userData!: User;

  constructor(private userService: UserService) {}

  ngOnInit() {
    // Relying on ngOnInit to ensure userId is ready
    this.userData = this.userService.getUserSync(this.userId);
  }
}

After — signal-based:

      @Component({...})
export class UserComponent {
  userId = input.required<string>();
  private userService = inject(UserService);

  // Derives the user data reactively without needing a hook
  userData = computed(() => this.userService.getUserSync(this.userId()));
}

The signal-based option is even better as it would react to subsequent updates ot the userId input, if that ever happens.

Retiring ngOnDestroy

Manually storing Subscription arrays or other techniques inside ngOnDestroy is no longer necessary thanks to takeUntilDestroyed().

Before — manual subscription and unsubscription:

      @Component({...})
export class AlertComponent implements OnDestroy {

  private sub: Subscription;

  constructor(private alertService: AlertService) {
    this.sub = this.alertService.alerts$
      .subscribe(alert => console.log(alert)); 
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

After — takeUntilDestroyed:

      @Component({...})
export class AlertComponent {

  constructor(private alertService: AlertService) {
    this.alertService.alerts$
      .pipe(takeUntilDestroyed())
      .subscribe(alert => console.log(alert));
  }
}

Here again, the approach is more concise and readable. And, of course, replacing RxJs entirely with Signals would simplify this even further (I have some good tips about that Signal migration here).

As we can see, lifecycle hooks can be replaced with a more maintainable option most of the time. Lifecycle hooks aren’t dead, but they are now specialized tools rather than everyday necessities (e.g., you still need ngAfterViewInit for direct DOM/canvas manipulation).

More certificates.dev articles

Get the latest news and updates on developer certifications. Content is updated regularly, so please make sure to bookmark this page or sign up to get the latest content directly in your inbox.

Middleware: What It Is, How It Chains, and When to Write Your Own

Middleware is one of Laravel’s most tested certification topics because it sits at the core of the request lifecycle. This article goes beyond basic syntax to explain how middleware works internally, how the pipeline pattern processes requests, what happens when $next is skipped, and why some middleware never executes. If you want to truly understand Laravel middleware rather than just use it, this is where to start.

Steve McDougall

May 28, 2026

Rolldown and Vite 8: What Changed

Vite 8 replaced both esbuild and Rollup with Rolldown. Here's what that means for your Vue project in practice.

Reza Baar

May 27, 2026

Closures Explained: How Functions Remember Their Scope

A function in JavaScript remembers the scope it was created in, even after that scope has finished executing. Learn what closures are, why the loop bug happens, and how to use them in practice.

Martin Ferret

May 26, 2026