There seems to be a peculiar issue with the properties of an angular component that I have set up. It appears that these properties are losing their values after the initialization process. The component is essentially a basic HTML file containing a video player. (shown below)
<video width="200" controls="true" poster="" id="video">
<source type="video/mp4" src="http://www.w3schools.com/html/mov_bbb.mp4">
</video>
Subsequently, in the typescript file of the component, I have experimented by initializing the property with a predefined value, creating it without a value and then assigning it in the constructor, and also by creating it without a value and assigning it in the onInit function. In all three scenarios, the value appears correct when logged in the console. However, at a later event, the value becomes undefined. Additionally, please note that the property has not been linked or bound to any specific elements.
Create properties with initial values
export class VideoPlayerComponent implements OnInit {
timeStarted = 0;
timePlayed = 0;
duration = 0;
video: HTMLVideoElement;
constructor() {
}
ngOnInit(): void {
//Values appear accurate when logged here
console.log("Time Started: " + this.timeStarted);
console.log("Time Played: " + this.timePlayed);
console.log("Duration: " + this.duration);
this.video = <HTMLVideoElement> document.getElementById("video");
this.video.addEventListener("pause", this.videoStoppedPlaying);
}
videoStoppedPlaying(event) {
//Value is undefined at this point
console.log("Time Started: " + this.timeStarted);
console.log("Time Played: " + this.timePlayed);
console.log("Duration: " + this.duration);
}
}
Create properties and assign in constructor
export class VideoPlayerComponent implements OnInit {
timeStarted: number;
timePlayed: number;
duration: number;
video: HTMLVideoElement;
constructor() {
this.timeStarted = 0;
this.timePlayed = 0;
this.duration = 0
this.video = <HTMLVideoElement> document.getElementById("video");
}
ngOnInit(): void {
//Values appear accurate when logged here
console.log("Time Started: " + this.timeStarted);
console.log("Time Played: " + this.timePlayed);
console.log("Duration: " + this.duration);
this.video.addEventListener("pause", this.videoStoppedPlaying);
}
videoStoppedPlaying(event) {
//Value is undefined at this point
console.log("Time Started: " + this.timeStarted);
console.log("Time Played: " + this.timePlayed);
console.log("Duration: " + this.duration);
}
}
Create properties and assign in onInit
export class VideoPlayerComponent implements OnInit {
timeStarted: number;
timePlayed: number;
duration: number;
video: HTMLVideoElement;
constructor() {
}
ngOnInit(): void {
this.timeStarted = 0;
this.timePlayed = 0;
this.duration = 0
this.video = <HTMLVideoElement> document.getElementById("video");
//Values appear accurate when logged here
console.log("Time Started: " + this.timeStarted);
console.log("Time Played: " + this.timePlayed);
console.log("Duration: " + this.duration);
this.video.addEventListener("pause", this.videoStoppedPlaying);
}
videoStoppedPlaying(event) {
//Value is undefined at this point
console.log("Time Started: " + this.timeStarted);
console.log("Time Played: " + this.timePlayed);
console.log("Duration: " + this.duration);
}
}
If anyone could shed some light on the possible reasons behind the disappearance of the value post-initialization and loading, it would be greatly appreciated.