$onInit / $onChanges / $onDestroy / $postLink en Angular moderno

app.component('userChart', {
  bindings: { userId: '<' },
  controller: function ($element, ChartService) {
    var ctrl = this, chart;
    ctrl.$onInit = function () { ctrl.ready = true; };
    ctrl.$onChanges = function (changes) {
      if (changes.userId) { ctrl.load(changes.userId.currentValue); }
    };
    ctrl.$postLink = function () { chart = ChartService.create($element[0]); };
    ctrl.$onDestroy = function () { chart.destroy(); };
  }
});

export class UserChartComponent {
  private host = inject<ElementRef<HTMLElement>>(ElementRef);
  private charts = inject(ChartService);
  private destroyRef = inject(DestroyRef);
  userId = input.required<string>();

  constructor() {
    effect(() => this.load(this.userId()));               // $onChanges
    afterNextRender(() => {                                // $postLink
      const chart = this.charts.create(this.host.nativeElement);
      this.destroyRef.onDestroy(() => chart.destroy());   // $onDestroy
    });
  }

  private load(id: string) { /* request the chart data */ }
}