(Angular) "Property 'display' is used before its initialization" - html

Question

I'm trying to create a timer in Angular in which I should be able to save the various values of the time (start, finish and length, right now just length) and "print" them in HTML.
I tried inserting this.display in the length property of the interface "result" but it says "Property 'display' is used before its initialization". I think I should be using the ngOnInit or the constructor in some way but I'm unsure on how to proceed.
I've created the function clearTimer() which should both work as a function for clearing the current displayed timer and saving the value in a list.
Feel free to also correct my current code if you don't find it optimal for its purpose.
HTML:
<div class="modalbox" [class.active]="modalboxActive">
<div class="modal">
<p>What did you do?</p>
<input type="text" [(ngModel)]="activity.name" #task />
<button
(click)="addTask(task.value)"
(click)="task.value = ''"
[disabled]="activity.name === ''"
(click)="clearTimer()"
>
OK
</button>
</div>
</div>
<div class="boxSuper">
<div class="boxLeft">
<div class="containerUp">
<button id="start" (click)="startTimer()">START</button>
<button id="pause" (click)="pauseTimer()">PAUSE</button>
<button id="stop" (click)="stopTimer()">STOP</button>
</div>
<div class="containerDown">
<p>{{ display }}</p>
</div>
</div>
<div class="boxRight">
<div class="containerLeft">
<div class="leftList">
<ul class="listElement" *ngFor="let item of duration">
<li>
Length:
<span>{{ item.length }}</span>
</li>
</ul>
</div>
</div>
<div class="containerRight">
<div class="rightList">
<ul class="listElement" *ngFor="let item of list">
<li>
Activity:
<span>{{ item.name }}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
TS:
import { importExpr } from '#angular/compiler/src/output/output_ast';
import { Component, OnInit } from '#angular/core';
import { timer } from 'rxjs';
import { Activity } from '../activity';
import { Result } from '../result';
#Component({
selector: 'app-timer',
templateUrl: './timer.component.html',
styleUrls: ['./timer.component.css'],
})
export class TimerComponent implements OnInit {
ngOnInit() {}
time: number = 0;
display: string | undefined;
interval: any;
modalboxActive = false;
activity: Activity = {
name: '',
};
list: any[] = [];
result: Result = {
start: undefined,
end: undefined,
length: this.display, // here display gets marked in red and it says "Property 'display' is used before its initialization."
};
duration: any[] = [];
addTask(item: string) {
this.list.push({ name: this.activity.name });
this.activity.name = '';
this.modalboxActive = false;
}
clearTimer() {
this.duration.push({ length: this.result.length });
}
startTimer() {
console.log('go');
this.interval = setInterval(() => {
if (this.time === 0) {
this.time++;
} else {
this.time++;
}
this.display = this.transform(this.time);
}, 1000);
}
transform(value: number): string {
var sec_num = value;
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - hours * 3600) / 60);
var seconds = sec_num - hours * 3600 - minutes * 60;
return hours + ':' + minutes + ':' + seconds;
}
pauseTimer() {
clearInterval(this.interval);
}
stopTimer() {
this.modalboxActive = true;
clearInterval(this.interval);
console.log('show');
}
}
"Result" interface:
export interface Result {
start: string | undefined;
end: string | undefined;
length: string | undefined;
}