Which lifecycle hook method will use to get updated value of totalColor value in angular 18?

I am trying to get the updated array value if user will click on any function from the mentioned 5 functions(fun1,fun2,fun3,fun4,fun5). So, Which lifecycle hook method will use to get updated value of totalColor.

app.component.ts:

import { Component, VERSION, OnInit, OnChanges } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements OnInit { name = 'Angular ' + VERSION.major; public totalColor = []; ngOnInit(): void { console.log(this.totalColor); } fun1(){ this.totalColor.push(1); } fun2(){ this.totalColor.push(2); } fun3(){ this.totalColor.push(5); } fun4(){ this.totalColor.push(8); } fun5(){ this.totalColor.push(64); } }

app.component.html:

<button (click)="fun1()"> Fun 1 </button> <button (click)="fun2()"> Fun 2 </button> <button (click)="fun3()"> Fun 3 </button> <button (click)="fun4()"> Fun 4 </button> <button (click)="fun5()"> Fun 5 </button>

demo:https://stackblitz.com/edit/angular-ivy-y36tztbw?file=src%2Fapp%2Fapp.component.ts