diff --git a/src/app/components/auto-refresh-button.component.ts b/src/app/components/auto-refresh-button.component.ts index b4953f7ed..7118ddb60 100644 --- a/src/app/components/auto-refresh-button.component.ts +++ b/src/app/components/auto-refresh-button.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, OnInit, Output, inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, computed, inject, signal } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatDialog, MatDialogModule } from '@angular/material/dialog'; import { MatIconModule } from '@angular/material/icon'; @@ -21,35 +21,39 @@ import { IconsService } from '@services/icons.service'; MatDialogModule, MatButtonModule, MatIconModule, - ] + ], + changeDetection: ChangeDetectionStrategy.OnPush }) export class AutoRefreshButtonComponent implements OnInit{ private readonly iconsService = inject(IconsService); intervalDisplay: string; - @Input({ required: true }) intervalValue: number; + + private readonly _intervalValue = signal(-1); + private readonly _isDisabled = computed(() => this._intervalValue() === 0); + + @Input({ required: true }) set intervalValue(value: number) { + this._intervalValue.set(value); + } + + get isDisabled(): boolean { + return this._isDisabled(); + } + + get intervalValue() { + return this._intervalValue(); + } @Output() intervalValueChange: EventEmitter = new EventEmitter(); constructor(private readonly _dialog: MatDialog) { } - - private _isDisabled = false; ngOnInit(): void { - this.intervalDisplay = this.intervalValue === 0 ? $localize`:Button disabled@@autoRefreshButton:Disabled` : (this.intervalValue + $localize` seconds`); - this.setDisabled(); + this.intervalDisplay = this.isDisabled ? $localize`:Button disabled@@autoRefreshButton:Disabled` : (this.intervalValue + $localize` seconds`); } getIcon(name: string): string { return this.iconsService.getIcon(name); } - - setDisabled() { - this._isDisabled = this.intervalValue === 0; - } - - get isDisabled(): boolean { - return this._isDisabled; - } emit(value: number): void { this.intervalValueChange.emit(value); @@ -65,7 +69,6 @@ export class AutoRefreshButtonComponent implements OnInit{ dialogRef.afterClosed().subscribe(value => { if (value !== undefined) { this.intervalValue = value; - this.setDisabled(); this.intervalDisplay = this.isDisabled ? $localize`:Button disabled@@autoRefreshButton:Disabled` : (this.intervalValue + $localize` seconds`); this.emit(value); }